前端关于jquery一些总结

关于jQuery的一些总结

  • 定义:jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单
  • 使用:将一个选择表达式,放进构造函数jQuery()(简写$),然后得到被选中的元素

jQuery 如何获取元素

  • jQuery获取元素方法分为两种:jQuery选择器,jQuery遍历函数
  1. jQuery选择器
    a. 属性选择器(又称CSS选择器)
    b. 基础选择器
    c. 基础过滤
    d. 子元素过滤
    e. 内容过滤
    f. 表单
    g. 层级
    h. jquery扩展
    i. 可滤性过滤
    CSS选择器

    $(document);//选择整个文档对象
    $('#myId');//选择ID为myId的网页元素
    $('div.myClass');//选择class为myClass的div元素
    $('input[name=first]');//选择name属性等于first的input元素

    jQuery特有表达方式

    $('a:first');//选择网页第一个元素
    $('tr:odd');//选择表格的奇数行
    $('#myForm:input');//选择表单中input元素
    $('div:visible');//选择可见div元素
    $('div:gt(2)');//选择div所有元素,除了前三个
    $('div:animated');//选择当前处于动画状态的div元素
  2. jQuery遍历函数
    a.过滤

    $('div').eq(5);//选择第6个div元素
    $('div').filter('myClass');//选择class等于myClass的div元素
    $('div').first();//选择第1个div元素
    $('div').has('p');//选择包含p元素的div元素

    b.其他遍历

    $('div').add();//添加元素到匹配的元素集合
    $('div').contents();//获得匹配元素集合中每个元素的子元素,包括文字和注释节点
    $('div').end();//终止在当前链的最新过滤操作,并返回匹配的元素的以前状态

    c.树遍历

    $('div').find(); //选择div元素查找元素
    $('div').children(); //选择div元素的所有子元素
    $('div').next('p');//选择div元素后面的第一个p元素
    $('div').parent();//选择div元素的父元素
    $('div').pre();//选择div元素的前一个元素
    $('div').siblings();//选择div元素的同级元素

jQuery 的链式操作是怎样的

  • 原理:每次方法执行完后返回this对象,然后后面的方法就可以在this环境下执行
  • 优点:链式操作使得异步编程的流程更加清晰,不会像回调函数一样相互耦合,难以分辨函数的执行顺序且维护困难,实现了水平扩展
  • 缺点:只能应用在不需要返回值的情况下,或者说只能最后一步才能设置返回值,因为要支持链式调用返回的只能是this
  • window.jQuery()是全局函数
  • $(选择器)用于获取对应函数,但它不返回这些元素,返回一个对象,称之为jQuery构造出来的对象(api),这个对象可以操作对应的元素

    $('div').find('h3').eq(2).html('hello')

    等价于

    $('div') //找到div元素
    .find('h3')//选择其中h3元素
    .eq(2) //选择第3个h3元素
    .html('hello');//将它内容改成hello
  • .end()用法:可以后退一步

    $('div') //找到div元素
    .find('h3')//选择其中h3元素
    .eq(2) //选择第3个h3元素
    .html('hello')//将它内容改成hello
    .end()//退回到选中所有h3元素的那一步
    .eq(0)//选中第一个h3元素
    .html('world');//将内容改成world
    

jQuery 如何创建元素

jQuery 如何移动元素

jQuery 如何修改元素的属性

jquery中文文档: https://www.jquery123.com/cat...
阮一峰设计思想: http://www.ruanyifeng.com/blo...

你可能感兴趣的:(前端jquery)