jquerry

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;
        }
        }, "请输入正确的手机号");
    

09.分页插件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值