jquerry

最新推荐文章于 2021-03-17 17:25:07 发布

滴滴家的小答答

最新推荐文章于 2021-03-17 17:25:07 发布

阅读量191

点赞数 1

分类专栏： Jqueery

本文链接：https://blog.csdn.net/weixin_42318311/article/details/111832214

版权

Jqueery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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() 找到某一个元素的所有结构父级，一直到 html
- find() 找到一组元素中的某一个
```
   // 在 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(''):判断某一个元素有没有某一个 class
addClass(''):给元素添加一个类名
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, 超时时间，单位是 ms
- context: ‘’, 你执行回调函数的时候，这个函数中的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;
    }
    }, "请输入正确的手机号");