文章目录
- 前言
- 一、JQuery是什么？
- 二、JQuery的使用步骤
- 1.引入
- 2.书写位置
- 3. 表示方法
- 三、JQuery选择器
- 1.层级选择器
- 2. 筛选选择器
- 3. 排他思想
- 4. 精品展示
- 四、jQuery样式操作
- 1. 修改样式
- 2.类操作
- 1. 添加
- 2. 移除
- 3. 切换
- 五、jQuery动画
- 1. 显示和隐藏
- 2. 滑动
- 1. slide
- 2. hover
- 3. 停止
- 4.淡入淡出
- 5. 自定义动画
- 六、jQuery属性操作
- 1. prop方法
- 2. attr方法
- 七、jQuery内容操作
- 八、元素操作
- 1. 遍历元素
- 2. 创建元素
- 3. 添加元素
- 4. 清除元素
- 九、尺寸和位置操作
- 1. 尺寸方法
- 十、事件操作
- 1. 事件绑定
- 1.一次绑定一个事件
- 2.一次性绑定多个事件
- 3.为不同的事件绑定相同的处理函数
- 2. 事件委派
- 3. 案例 -- 留言板
- 4. 事件解绑
- 5. 触发事件
- 6. 事件对象
- 总结
前言
首先,很抱歉本专栏的最后一个内容JQuery拖到现在才发出来,因为最近事情真是有点多,来不及持续更新,望谅解!
一、JQuery是什么？
jQuery：jQuery是一个快速、简洁的JavaScript库，其设计宗旨是“write less，do more”，倡导用更少的代码，做更多的事情。
二、JQuery的使用步骤
1.引入
<script'src="jquery-3.3.1.min.js"></script>
<script>
$("div").hide()；//隐藏div元素
</script>
2.书写位置
//语法1（简写形式）
$（function（）{
// 页面DOM加载后执行的代码
}）；
//语法2（完整形式）
$（document）.ready（function（）{
//页面DOM加载后执行的代码
}）；
3. 表示方法
三、JQuery选择器
jQuery选择器和css选择器非常类似(有如下几种常用的选择器)
1.层级选择器
jQuery层级选择器：层级选择器可以完成多层级元素之间的获取。
// 隐式迭代
<div>第1个div</div><div>第2个div</div><div>第3个div</div><div>第4个div</div>
<script>
console.log（$（"div"））；
// 使用css（）方法修改元素CSS样式，将背景色设为pink
$（"div"）.css（"background"，"pink"）；//对所有的div进行相同操作
</script>
2. 筛选选择器
筛选选择器：筛选选择器用来筛选元素，通常和别的选择器搭配使用。
常用筛选方法
3. 排他思想
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
$(function(){
// 隐式迭代
$('button').click(function(){
$(this).css({'background': 'skyblue'});
$(this).siblings().css({'background': ''}); // 调节其他兄弟节点
})
})
</script>
</body>
4. 精品展示
<script>
$（“#left li”）.mouseover（function（）{
//鼠标指针经过左侧的li
var index = $（this）.index（）；
//得到当前li的索引
console.log（index）；
//让右侧盒子相应索引的图片显示出来
$（"#content div"）.eq（index）.show（）；
//将其他图片隐藏起来
$（"#content div"）.eq（index）.siblings（）.hide（）；
}）；
</script>
链式编程
$（"#left li"）.mouseover（function（）{
var index = $（this）.index（）；
//用一行代码完成当前索引元素的显示和其他兄弟元素的隐藏
$（"#content div"）.eq（index）.show（）.siblings（）.hide（）；
}）；
四、jQuery样式操作
1. 修改样式
获取样式：css（）方法接收参数时只写样式名，则返回样式值。
<style>
div{
width：200px；
height：200px；
background-color：'pink'；
}
</style>
<div></div>
<script>
console.log（$（"div"）.css（"width"））；//结果为：200px
</script>
2.类操作
1. 添加
addClass（）添加类：基本语法$（selector）.addClass（className）
2. 移除
removeClass（）移除类：基本语法$（selector）.removeClass（className）
3. 切换
toggleClass（）切换类：基本语法$（selector）.toggleClass（className，switch）
五、jQuery动画
1. 显示和隐藏
2. 滑动
1. slide
2. hover
hover（）方法实现上述功能：基本语法$（selector）.hover（[over.]out）
$(".nav > li"). hover(function() {
$(this). children("ul"). slideToggle(200);
}
3. 停止
stop（）方法：基本语法$（selector）.stop（stopAll，goToEnd）；
$（"div"）.stop（）；//停止当前动画，继续下一个动画
$（"div"）.stop（true）；//清除div元素动画队列中的所有动画
$（"div"）.stop（true，true）；//停止当前动画，清除动画队列中的所有动画
$（"div"）.stop（false，true）；//停止当前动画，继续执行下一个动画
4.淡入淡出
5. 自定义动画
animate（）方法：基本语法$（selector）.animate(params[,speed] [,easing] [ fn])
六、jQuery属性操作
1. prop方法
- prop（）方法：prop（）方法用来设置或获取元素固有属性值。
- prop（）方法获取属性值语法：$（selector）.prop（“属性名”）。
- prop（）方法设置属性值语法：$（selector）.prop（“属性”，“属性值”）
2. attr方法
- attr（）方法：attr（）用来设置或获取元素的自定义属性，自定义属性是指用户给元素添加的非固有属性。
- attr（）方法获取属性值语法：$（selector）.attr（“属性名”）。
- attr（）方法设置属性值语法：$（selector）.attr（“属性”，“属性值”）
七、jQuery内容操作
八、元素操作
1. 遍历元素
- 遍历元素：基本语法$（selector）.each（function（index，domEle））；
- 该方法的参数是一个函数。这个函数将会在遍历时调用
- 在函数中，index参数是每个元素的索引号
- domEle是每个DOM元素的对象（个元素调用一次不是jQuery对象）
- 如果要想使用jQuery方法，需要将这个DOM对象转换成为jQuery对象，即$（domEle）。
- . e a c h （）方法：基本语法 .each（）方法：基本语法 .each（）方法：基本语法.each（Object，function（index，element）
2. 创建元素
创建元素：通过jQuery可以很方便地动态创建一个元素，直接在“$（）”函数中传入一个HTML字符串即可进行创建。
$（function（）{
var li = $（"<li>我是后来创建的li</li>"）；//创建元素
console.log（li）；//将元素输出到控制台
}）；
3. 添加元素
内部添加：内部添加的方式可以实现在元素内部添加元素，并且可以放到内部的最后面或者最前面。
var li = $（"<li>我是后来创建的li</li>"）；
$（"ul"）.append（li）；//内部添加并且放到内部的最后面
$（"ul"）.prepend（li）；//内部添加并且放到内部的最前面
外部添加：外部添加就是把元素放入目标元素的后面或者前面，通过after（）和before（）方法来实现。
var div = $（"<div>我是后来创建的div</div>"）；
$（".test"）.after（div）；//div放入到目标元素的后面
$（".test"）.before（div）；//div放入到目标元素的前面
4. 清除元素
删除元素：删除元素分为删除匹配的元素本身、删除匹配的元素里面的子节素点两种情况。
九、尺寸和位置操作
1. 尺寸方法
尺寸操作：在jQuery中，尺寸方法用来获取或设置元素的宽度和高度。
十、事件操作
1. 事件绑定
通过**on()**方法绑定事件：on()方法绑定单个事件
通过事件方法绑定事件：已经用过了单个事件的绑定，是通过调用某个事件方法，传入事件处理函数来实现的，如click（）、change（）等。
<div>绑定事件</div>
<script>
$（"div"）.click（function（）{
$（this）.css（"background"，"purple"）；
}）；
$（"div"）.mouseenter（function（）{
$（this）.css（"background"，"skyblue"）；
}）；
</script>
1.一次绑定一个事件
// 一次绑定一个事件
$（"div"）.on（"click"，function（）{
$（this）.css（"background"，"yellow"）
}
2.一次性绑定多个事件
// 一次绑定多个事件
$（"div"）.on（{
mouseenter：function（）{
$（this）.css（"background"，"skyblue"）；
}，
click：function（）{$（this）.css（"background"，"purple"）；}，
mouseleave：function（）{
$（this）.css（"background"，"blue"）；
}
3.为不同的事件绑定相同的处理函数
//为不同事件绑定相同的事件处理函数
$（"div"）.on（"mouseenter mouseleave"，function（）{
$（this）.toggleClass（"current"）；
}）；
2. 事件委派
事件委派：把原本要给子元素绑定的事件绑定到父元素上，这就表示把子元素的事件委派给父元素
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
</ul>
<script>
$（"ul"）.on（"click"，"li:first-child"，function（）{
alert（"单击了li"）；//单击第1个li会触发此事件
}）；
</script>
3. 案例 – 留言板
案例分析：
① 编写一个简单的留言板页面
② 单击“发布”按钮，显示用户发布的留言
③ 在每个留言的右边提供一个“删除”链接，用来删除留言
4. 事件解绑
off()方法：该方法可以移除通过on（）方法添加的事件处理程序
$（'p'）.off（）；//解除p元素上的所有事件处理程序
$（'p'）.off（'click'）；//解绑p元素上的单击事件
$（'ul'）.off（'click'，'li'）；//解绑事件委派
5. 触发事件
- 事件方法触发事件：jQuery中的事件方法在调用时如果传参数，表示绑定事件，如果不传参数，表示触发事件。
//绑定事件
$（"div"）.click（function（）{
alert（"hello"）；
}）；
//触发事件
$（"div"）.click（）；
- trigger（）方法触发事件：使用trigger（）方法可以触发指定事件。
// 绑定事件
$（"div"）.click（function（）{
alert（"hello"）；
}）；
//触发事件
$（"div"）.trigger（"click"）；
6. 事件对象
- 事件对象：当事件被触发时，就会有事件对象的产生，在事件处理函数中可以使用参数来接收事件对象。
<div>点我</div>
<script>
$（"div"）.on（"click"，function（event）{
console.log（event）；
}）；
</script>
- 事件对象：通过事件对象阻止事件冒泡行为。
event.stopPropagation（）；// 阻止事件冒泡
- 事件对象：通过事件对象阻止默认事件行为。
<a href="1.html">点我</a>
$（document）.on（"click"，function（）{
console.log（"单击了document"）；
}）；
$（"a"）.on（"click"，function（event）{
event.preventDefault（）；
//阻止事件默认行为
console.log（"单击了a"）；
}
总结
本栏目到这里基本就结束了,感谢这么多天大家的陪伴,后续有想要了解的,或者需要什么类型的教程的可以私信我,我会在能力范围之内尽力满足大家的要求!
