认识了解jQuery

作者: 学的会的前端 | 来源:发表于2019-07-23 12:31 被阅读0次

学习网站

http://youmightnotneedjquery.com/
jQuery API中文文档：http://jquery.cuishifeng.cn/
jQuery文档https://jquery.com/

为什么要用 jQuery

DOM API
-- 难用，很难记住；
-- 存在兼容性问题；
-- 功能太少，不能与时俱进，浏览器更新了，才可以使用新的语法。
jQuery
-- 兼容性好；
-- API 友好，和语义的理解很接近；
-- 功能强大，与时俱进。

什么时候适合用 jQuery

DOM 操作较多（事件监听）
简单的 AJAX
需要兼容多款浏览器

什么时候不用 jQuery

页面交互极为简单，兼容性不高
页面对流量有苛刻的要求，比如在弱网络上
上级强制、团队已经有了 jQuery 的代替品

jQuery 做什么

jQuery是一个库，是一个工具包，里面有各种各样的小工具，包括

选择网页元素
改变结果集
元素的操作：取值和赋值
元素的操作：移动
元素的操作：复制、删除和创建
工具方法
事件操作
特殊效果
AJAX
http://devdocs.io/jquery/

jQuery版本

jQuery1.xx兼容IE678,文件大，体积大
jQuery2.xx不在兼容IE678，体积小

jQuery 的两种 API（使用方式）

//1. $.(函数名)
$.noConflict()
$.each()
//2. $.(元素选择器).(函数名)
$('ul').addClass()
$('p').text('hi')

jQuery的ready，window.onload和$(handler)的区别

window.onload事件，是指页面上所有的元素加载完成之后（包括图片等），再去执行函数。要把Js语句放到前面，要加一个Onload。
$(handler)是指页面上DOM元素加载完就可以执行函数。
handler是页面要处理的执行函数。也就是说把要执行的语句放到 $()里面，就可以实现把JS放在任何位置，无论是head还是body里面都可以。 `$ ().reday(handler)(this is not recommended)`
window.onload的执行时间太长，要等所有的加载完成才会执行JS。

jQuery选择器

使用jQuery获取元素

jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素。了方便使用者jQuery刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器。
在这里http://jquery.cuishifeng.cn/直接查找响应的API即可。

jquery和DOM的区别
$('xxx')选出来的元素是jQuery对象，可以理解成是对DOM元素的一次封装，和本身的原生DOM不是一个。即

$('xxx') === document.querySelector('xxx')
结果为false

当用$选择一些元素时，获取的是JQuery对象，所以只能使用jQuery方法。所以API是jQuery对象的API，不是原生DOM 的API。

$('xxx').html('123')  // true
document.querySelector('xxx').html('123')   // false
document.querySelector('xxx').innerHTML = '123'    // true

jQuery对象和原生对象的转换

$('xxx')[0]  // jQuery对象就可以转换成原生对象
$('xxx')[0].innerText = '123'    // true
$(document.querySelector('xxx'))  //DOM对象就可以变成jQuery对象。
$(document.querySelector('xxx')).html('123')  // true

获取到jQuery对象并且想得到其中的某一项，用.eq()方法

$('xxx').eq(n)  // 得到的是jQuery对象

兄弟元素获取

.next([selector]), .prev([selector])
next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素

$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素

.siblings([selectors])
获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

$('li.third-item').siblings()

父子元素获取.parent([selector])
取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器

$('li.item-a').parent()

.parents([selector])
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数

$('li.item-a').parents('div')

.children([selector])
获得匹配元素集合中每个元素的子元素，选择器选择性筛选

$('ul.level-2').children()

.find([selector])
查找符合选择器的后代元素

$('ul').find('li.current');
筛选当前结果集

.first() === .eq(0)
获取当前结果集中的第一个对象
.last() === .eq(n-1)
获取当前结果集的最后一个对象
.filter(selector), .filter(function(index))
筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('li').filter(':even')
$('li').filter(function(index) {
  return index % 3 == 2;
})

.not(selector), .not(function(index))
从匹配的元素集合中移除指定的元素，和filter相反
.is(selector), is(function(index)), is(dom/jqObj)
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

    if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }

.has(selector), .has(dom)
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('li').has('span')

jQuery DOM操作

创建元素

只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>');
$('div') //创建了一个div
$('<div id = "header>xxxx</div>')   // 创建一个DOM元素

添加元素

.append(content[,content]) / .append(function(index,html))

可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值

var li = $('<li>4</li>')
$('.container #wrap').append(li) 
//在最末尾添加一个li

.appendTo(target)
把对象插入到目标元素尾部，目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;

var li = $('<li>4</li>')
li.appendTo($('.container #wrap'))
//在最末尾添加一个li

.prepend(content[,content]) / .prepend(function(index,html))
向对象头部追加内容，用法和append类似，内容添加到最开始

var li2 = $('<li>0</li>')
$('.container #wrap').prepend(li2)
//在最开始添加一个元素li

.prependTo(target)
把对象插入到目标元素头部，用法和prepend类似

var li2 = $('<li>0</li>')
li2.prependTo($('.container #wrap'))
//在最开始添加一个元素li

.before([content][,content]) / .before(function)
在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似

var div = $('<div>llll</div>')
$('.container').before('div')
//在.container的整体外部前面添加一个div。

.insertBefore(target)
把对象插入到target之前（同样不是头部，是同级）

var div2 = $('<div>22222</div>')
div2.insertBefore($('.container'))
//在.container的整体外部前面添加一个div。

.after([content][,content]) / .after(function（index）)
和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似

var div = $('<div>llll</div>')
$('.container').after('div')

.insertAfter(target)
和insertBefore相反，把对象插入到target之后（同样不是尾部，是同级）

var div2 = $('<div>22222</div>')
div2.insertAfter($('.container'))

删除元素

.remove([selector])
删除被选元素（及其子元素）

$('#wrap').remove()

.empty()
清空被选择元素内所有子元素，但是自身还存在

$('.container').empty()

.detach()
.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用

包裹元素

wrap(wrappingElement) / .wrap(function(index))
为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object
image.png
.wrapAll(wrappingElement)
把所有匹配对象包裹在同一个HTML结构中
image.png
.wrapInner(wrappingElement) / .wrapInner(function(index))
包裹匹配元素内容
image.png
.unwrap()
把DOM元素的parent移除
html([string])
这是一个读写两用的方法，用于获取/修改元素的innerHTML

当没有传递参数的时候，返回元素的innerHTML
当传递了一个string参数的时候，修改元素的innerHTML为参数值
看个例子

$('div').html()
$('div').html('123')

后续这种读写两用的方法很多，原理都类似
如果结果是多个进行赋值操作的时候会给每个结果都赋值
如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值

text()
和html方法类似，操作的是DOM的innerText值

jQuery事件

事件处理中最头疼的就是浏览器兼容问题，jQuery封装了很好的API，可以方便的进行事件处理
在1.7之前的版本中jQuery处理事件有多个方法， (google 搜索: jquery live bind degelate)作用各不相同，后来统一的使用on（绑定事件）/off（解绑事件）方法

.on( events [,selector ] [,data ], handler(eventObject) )

各参数含义

events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data：当一个事件被触发时，要传递给事件处理函数的event.data
handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false

//普通事件绑定，最简单的用法
$('div').on('click',function(e){
  console.log(this)
  console.log(e)
});

//事件委托或事件代理，想让div下面所有的span绑定事件，可以把事件绑定到div上。
$('div').on('click','span',function(e){
  console.log(this)
  console.log(e)
});

//便于事件的分类及解绑
$('.box>ul').on('click.hello','li',function(){
   ......
    }
 $('.box>ul').off('click.hello')
    //添加.hello的作用是：便于解绑事件。对某个事件进行了多次绑定的时候，其他的绑定事件没有被解绑，只有添加了.hello的绑定被解绑了

//可以在绑定的饿时候给事件处理程序传递一些参数
$('div').on('click',{name:'lili',age:23},function(e){
  console.log(e.data) //可以获取到{name:'lili',age:23}
});

//事件的简写
$('.box>ul').click(function(){
  .....
})
//因为对应的事件类型，都有其对应的方法。
或者

事件代理，事件委托的例子

<body>
  <div class = "box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    
  </div>
  <input id = "input" type = "text">
  <button id = 'btn'>添加</button>
  <div id = "wrap"></div>
  
  <script>
    //当点击li的时候，.wrap里面展示对应的文字
    /*
    $('.box>ul>li').on('click',function(){
      //this是原生对象的方法，要把它转换成jQuery对象$(this)
      var str = $(this).text() （=== var str = this.innerText()）
      $('#wrap').text(str)
    })*/
    //通过inut添加的元素点击无法展现内容，所以使用事件代理
    $('.box>ul').on('click','li',function(){
      //this是原生对象的方法，要把它转换成jQuery对象$(this)
      var str = $(this).text()
      //this仍然代表点击的元素li
      $('#wrap').text(str)
    }
    //当点击添加的时候，要把input里面的内容添加到ul中，作为ul的最后一个元素
    $('#btn').on('click',function(){
      //获取input元素里面的值
      var value = $('#input').val()
      $('.bix>ul').append('<li> +value+ </li>')
    })
  </script>
</body>

.off( events [, selector ] [, handler ] )

移除一个事件处理函数

$('.box li').off('click')

.trigger( eventType [, extraParameters ] )

触发事件，根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

$('li').eq(2).trigger('click')
//不需要用户点击，自动触发了点击事件
//也就是通过操作js模拟用户的点击

其他事件相关文档：https://www.jquery123.com/category/events/browser-events/

jQuery属性&CSS操作

属性相关

.val([value])
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

$('input').val()
$('input').val('newValue');
//原生DOM的方式
$('input')[0].value = '123'

.attr()

.attr(attributeName):获取元素特定属性的值
.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ):为元素属性赋值

$('#ipt').attr('type')  // 获取type的值
$('#ipt').attr()   //报错
$('#ipt').attr('type','checkbox')  //设置type的值
$('xxx').attr('id')  //读取ID的值

.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性（attribute）。.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
.prop()/.removeProp()
这两个方法是用来操作元素的property的，property和attibute是非常相似的概念，感兴趣可以看看jQuery的attr与prop

CSS相关

.css()
这是个和attr非常相似的方法，用来处理元素的css

$('xxx').css({height: '30px','border':'1px solid red'})
//原生js
var xxx = document.querySelector('xxx')
xxx.style.backgroundColor = 'blue'

.css(propertyName) / .css(propertyNames)
获取元素style特定property的值
.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
设置元素style特定property的值
.addClass(className) / .addClass(function(index,currentClass))
为元素添加class，不是覆盖原class，是追加，也不会检查重复
.removeClass([className]) / .removeClass(function(index,class))
移除元素单个/多个/所有class
.hasClass(className)
检查元素是否包含某个class，返回true/false
.toggleClass(className)
toggle是切换的意思，方法用于切换，switch是个bool类型值，
image.png
第一次没有"bounce则添加"bounce”。第二次又"bounce，则删除"bounce。