前端关于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

$('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 如何创建元素

• window.jQuery()是全局函数
• $(选择器)用于获取对应函数，但它不返回这些元素，返回一个对象，称之为jQuery构造出来的对象（api），这个对象可以操作对应的元素
• jQuery对象代指jQuery函数构造出来的对象

• 举例：

    a.Object是个函数，Object对象表示Object构造出来的对象
    b.Array是个函数，Array对象表示Array构造出来的对象
    c.Function是个函数，Function对象表示Function构造出来的对象
  

jQuery 如何移动元素

appendTo使用

• append:将元素从原来的位置揪下来，放到新的位置上
• 复制就是把$A给clone()下,然后（添加）to()给$B下（里）边

• 移动就是直接把$A给(添加)to()到$B下（里）边

  $(function(){
    $('#move').on('click',function){
       $('a').eq(0).clone().appendTo('p'); //复制模式
       $('a').eq(1).appendTo('p');  //移动模式
     }
  })

jQuery 如何修改元素的属性

• 链式风格：增删改查

1. 增

   $('<div><span>1</span></div>') //创建div
   .appendTo(document.body) //插入到body中
   
   const $div = $('<div>1</div>')
   $div.appendTo(document.body)

2. 删

   $div.remove()
   $div.empty() //找到所有子元素，remove掉

3. 改

   $div.text(?) //读写文本内容
   $div.html(?) //读写HTML内容
   $div.attr('titlle',?) //读写属性
   $div.css({color:'red'}) //读写style
   $div.addClass('blue')
   $div.on('click',fn)
   $div.off('click',fn)

升级版

• 使用原型，把共用属性（函数）全部放到$.prototype
• fn = $.prototype
• 然后让api.__proto__指向$.fn

4. 查

   $('#XXX') //返回值并不是元素，而是一个api元素
   $('#XXX').find('.red')//查找#XXX里的.red元素
   $('#XXX').parent()//获取爸爸
   $('#XXX').children()//获取儿子
   $('#XXX').sibling()//获取兄弟姐妹
   $('#XXX').index()//获取排名老几（从0开始）
   $('#XXX').next()//获取弟弟
   $('#XXX').pre()//获取哥哥
   $('#XXX').each(fn)//遍历并对每个元素执行fn
   

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