01.jquery 的认识
- jQuery是一个其前端的方法库
- jQuery的三个优点：
- 强大的选择器机制
- 优质的隐式迭代
- 无所不能的链式调用
- jQuery向全局暴露两个对象来通过我们调用它的方法
- jquery
- $
02.jQuery的选择器
-
获取页面中 dom 元素的方式
- jquery() || $()
- jQuery 的选择器再获取页面中的元素的时候，都是有多少获取多少
-
注意点：
- 用jquery获取到的元素不能使用 js原生的方法
- 用js元素获取到的方法不能使用 jquery的方法
- jquery返回的都是元素集合
- 如果想要得到某个元素 需要用索引获取
- 当在jquery元素集合中使用索引去获取之后就变成了js 原生对象，就不能使用jquery的方法了
-
获取元素
- 根据
id获取元素：$('#id名') - 根据
class获取元素：$('.class名') - 根据标签名获取：
$('标签名') - 选择器也可以使用
$('input[type=checkbox]') - 特殊选择器
$('li:odd')获取索引为奇数的 li$('li:even')获取索引为偶数的 li$('li:first')获取第一个元素$('li:last')获取最后一个元素$('li:eq(n)')准确的获取索引为几的元素
- 根据
03.jquery 筛选器
- Query 的筛选器就是在选择器选择到一组元素以后 进行一些更详细的筛选
first()找到所有元素中的第一个last()找到所有元素中的最后一个next()找到某一个元素的下一个兄弟元素prev()找到某一个元素的上一个兄弟元素nextAll()找到某一个元素的后面的所有兄弟元素prevAll()找到某一个元素的前面的所有兄弟元素sibling()找到某元素的所有兄弟元素parent()找到某一个元素的父元素parents()找到某一个元素的所有结构父级，一直到 htmlfind()找到一组元素中的某一个// 在 li 的所有父级里面找到所有 body 标签 $('li').parents().find('body') // 找到 div 标签下所有后代元素中所有类名为 box 的元素 $('div').find('.box')
04.jquery 属性操作
- 给元素添加或者获取属性:
prop()prop('id')获取id属性prop('id','box')添加id属性，属性值为box- prop 这个方法只能添加元素自己本身就有的属性
- 如果是添加的自定义属性，不会显示在标签上，但是可以使用
- 给一个元素添加某个自定义属性:
attr() - 移除元素的某一个属性
removeAttr():移除元素的自定义属性
05.操作元素的类名
hasClass(''):判断某一个元素有没有某一个 classaddClass(''):给元素添加一个类名toggleClass(''):切换元素类名removeClass('')移出- 隐式迭代
- 绑定点击事件 click(function(){})
- 把dom元素变为jquery对象 $(dom元素)
- $(this).index() 当前点击的索引
- tab切换的案例
06.操作元素的内容
+ `html()`:给元素的 innerHTML 赋值,如果没有内容就是获取
+ `text()`:给元素的 innerText 赋值,如果没有内容就是获取
+ `val()`:给元素的 value 赋值
07.操作样式
+ `css(attr,value)`:给元素设置一个 css 样式,如果只有一个参数就是获取
+ `css({})`
08.jquery标准绑定事件的方法
- on绑定事件
元素集合.on(事件类型，事件处理函数)元素集合.on(事件类型， 事件委托， 事件处理函数)元素集合.on(事件类型， 传递参数， 事件处理函数)- 在事件对象的 data对象中获取参数
元素集合.on(事件类型， 事件委托， 传递参数， 事件处理函数)
- off取消事件
元素集合.off(事件类型，事件处理函数)
- trigger 自动触发事件
元素集合.trigger(事件类型)
09.jquery一个特殊的事件 hover
-
这个事件不能使用 on绑定
-
元素集合.hover(function(){移出触发},function(){移出触发})
-
- 学会看jquery的文档
- 在文档里面，参数位置的中括号不是数组
- 而是选填
- 文档里面写在中括号里面的内容你可以不写
`
css(name|pro|[,val|fn])
css(name)>css(‘color’)
css(pro)=>css([‘color’,‘fontSize’])
[] 中的参数表示可选参数，如果要写的时候 可以写value的是 或者是一个函数
value
css(name,value) ===>css(‘color’,‘red’)
css(name,value) ===>css(‘color’,function(index,value){
return ‘blue’
})
`
01.操作元素（对元素的增删改查）
-
创建元素
$(<div><div>)
-
把元素添加到页面
父.append(子)- 在父元素中的最后位置追加一个子元素
- 返回值：父元素的jquery集合
子.appendTo(父)- 把子元素追加到父元素的最后面
- 返回值：子元素jquery集合
父.prepend(子)- 在父元素中的最前面追加一个子元素
- 返回值：父元素jquery集合
子.prependTo(父)- 把子元素追加到父元素的最前面
- 返回值：子元素jquery集合
a.after(b)- 把b元添加在a元素后面的位置，a在页面中已经存在的元素
- 返回值：a元素jquery集合
b.insertAfter(a)- 把b元添加在a元素后面的位置，a在页面中已经存在的元素
- 返回值：b元素jquery集合
a.before(b)- 把b元素添加到 a元素的前面，a元素在页面中已经存在的元素
- 返回值：a元素jquery集合
b.insertBefore(a)- 把b元素添加到a元素前面，a元素在页面中已经存在的元素
- 返回值：b元素jquery集合
-
修改元素（替换元素）
a.replaceWith(b)- 用 b 元素来替换 a元素
- 返回值：a元素的jquery集合，但是会警告该节点在页面中找不到
b.replaceAll(a)- 用b元素替换 a元素
- 返回值：b元素jquery集合
-
删除元素
empty()- 把标签中的内容全部删除，让自己变成一个空标签
- 返回值：当前元素的jquery集合
remove()- 移出元素，自己也会移出
- 返回值：
父.find(子).remove()- 移出父元素中某个子元素
-
克隆元素
clone()- 默认会把所有的子元素克隆
- 接收两个参数：
- 参数1：布尔值，表示是否把元素身上的事件克隆下来
- 参数2：布尔值，子元素身上的事件是否被克隆下来，默认跟随第一个参数的值
02.元素的尺寸
height()获取或设置内容区域的高- 注意点：不管有没有box-size都是操作内容区域
width()获取或设置内容区域的宽- 注意点：不管有没有box-size都是操作内容区域
innerHeight()元素内容区域 + padding区域- 不能设置只能获取
innerWidth()元素内容区域 + padding 区域- 不能设置只能获取
outerHeight()元素内容区域 + padding 区域 + border 区域outerWidth()元素内容区域 + padding 区域 + border 区域- outerHeight 和 outerWidth 是可以传递参数的
- 默认是 false，可以传递 true，true表示获取的宽高包括margin
03.元素的位置
-
offset()- 获取 或 者设置 元素和文档之间的距离
-
position()- 获取定位的left，top值
- 只能获取不能设置
-
scrollTop()- 获取或者设置卷去的高度
-
scrollLeft()- 获取或设置卷去的宽度
04.基础动画
show()- 让元素显示
- 参数：【选填】
- 参数1：时间，单位秒
- 参数2：运动曲线 linear
- 参数3：回调函数，运动结束之后触发
hide()- 让元素隐藏
- 参数：【选填】
- 参数1：时间，单位秒
- 参数2：运动曲线 linear
- 参数3：回调函数，运动结束之后触发
toggle()- 切换动画（如果当前是显示，那么就隐藏，如果当前是隐藏，那么就显示）
slideDown()- 让元素下拉显示
slideUp()- 让元素上拉隐藏
slideToggle()- 切换显示和隐藏
fadeIn()- 渐渐的显示
fadeOut()- 渐渐的隐藏
fadeToggle()- 渐隐渐显
fadeTo(速度,指定的透明度,回调函数)- 速度：show,normal,fast，1000
- 透明度的取值：0-1
- 回调函数：动画执行完成之后执行
- 渐渐的到一个你指定的透明度
05.自定义动画
animate()- 自定一些动画
- 参数：
- 参数1【必填】：是一个对象，需要运动的属性和目标值
- 参数2：运动的时间
- 参数3：运动的曲线
- 参数4：运动回调函数
06.回到顶部案例
07.手风琴效果
stop():让动画马上结束，停止到当前的动画运动的当前位置finish():让动画马上结束，停止在设置动画的结束位置end():返回到上一级的jquery元素集合
01.jquery 发送get请求
- 语法：
$.get() || jQuery.get() - 参数：
- 参数1：请求的地址（必填）
- 参数2：携带的参数（可以是对象，也可以是字符串）
- 参数3：成功的回调函数
- 参数4：期望返回的数据的类型
- 传递’json’表示会自动执行 JSON.parse()
- 如果后端返回的数据不是json数据的时候，那么获取不到正确结果
02.jquery 发送post请求
- 语法：
$.post() || jQuery.post() - 参数：
- 参数1：请求的地址
- 参数2：携带的参数（可以是对象，也可以是字符串）
- 参数3：成功的回调函数
- 参数4：期望返回的数据的类型
- 传递’json’表示会自动执行 JSON.parse()
03.jquery中的 ajax方法
- 语法：
$.ajax() || jQuery.ajax() - 参数：一般只会传递一个参数，就是一个对象
url: 必填，请求的地址type(method): 请求方式（不区分大小写）data: 请求携带的参数（支持对象或者字符串的形式）dataType: 期望的返回数据类型async: true|false, 是否异步success () {}, 成功的回调error () {}, 失败的回调 （不光是请求失败算失败，jQuery 判定失败就是失败）timeout: 1000, 超时时间，单位是 mscontext: ‘’, 你执行回调函数的时候，这个函数中的this 指向
04.jquery 直接发送 jsonp 请求
- 如果想要发送jsonp请求
- 在发送ajax请求的时候，把 dataType 的值改为jsonp即可
- 那么在这个对象中多了几个配置
- jsonp:请求 数据的参数的名字
05.多库并存
- jquery向全局暴露了两个关键字去 让我们去使用jquery
- $
- jQuery
noConflict交出自己的控制权- 语法：
jQuery.noConflict() || $.noConflict() - 不传递参数的时候表示交出 $ 的控制权, $ 不能用了
- 传递一个 true ，那么连 jQuery 整个变量页不能使用了
- 可以使用一个变量把
jQuery.noConflict() || $.noConflict()存起来， 这个变量就是你可以使用的jquery方法的一个关键字
- 语法：
06.全选案例
07.jquery的扩展机制
- jQuery 的所有方法分成两类
- 元素集合调用：
$('.div').css() - jQuery自己本身调用:
$.get()
- 元素集合调用：
jQuery.fn.extend(): 向 jQuery 的元素集合扩展方法
+ 参数：为一个对象，对象里面的每一个成员都是对元素集合的扩展方法
+ 扩展以后，就可以使用jquery集合来调用了jQuery.extend():向 jQuery 自己本身扩展一些方法
08.validate 插件
- 这个是jquery中提供一款验证表单的插件
- 使用：
- 必须引入jquery插件 validate插件（validate依赖jquery）
$('你要验证的表单').validate({
// 有一个选项是规则
rules: {},
// messages 是对提示文字进行书写
messages: {},
// 就是在验证成功的时候执行的函数
submitHandler: function (form) {
// 可以进行表单的发送去后端验证
}
})
- 在validate插件上添加自定义的验证 条件
- jQuery.validator.addMethod(‘名字’,funciton(){你设定的条件，返回值为布尔值})
jQuery.validator.addMethod("isMobile", function (value) { var pattern = /(^1[3,4,5,7,8]{1}[0-9]{9}$)/; if (pattern.test(value)) { return true; } else { return false; } }, "请输入正确的手机号");
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
