学习网站
- 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是页面要处理的执行函数。也就是说把要执行的语句放到().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。
网友评论