2019-05-28《锋利的jQuery》

第一章 认识jQuery

jQuery的优势:

1.轻量

2.强大的选择器

3.DOM操作的封装

4.可靠的事件处理机制

5.完善的Ajax

6.不污染顶级变量

7.兼容性

8.链式操作

9.隐式迭代

10.行为层与结构层的分离

11.丰富的插件支持

12.完善的文档

13.开源

1.3jQuery代码的编写

$是jQuery的一个简写形式

window.onload和$(document).ready()的区别

1.3.3jQuery代码风格

1.4jQuery对象和DOM对象

1.DOM对象(DOM元素节点)

2.jQuery对象 //jQ包装后产生的对象,jQ对象用jQ方法

1.4.2jQuery对象和DOM对象的相互转换

jQ对象     var $variable = jQ对象;

DOM对象 var varriable = DOM对象;

1.jQ转DOM

1.1JQ对象是一个类数组对象,可以通过[index]方法

var $cr = $('#cr');          //jQ对象

var cr = $cr[0];          //DOM对象

alert( cr.checked)    //检测这个checkbox是否被选中(意义不明)

1.2jQ方法,get(index)

var $cr = $('#cr');

var cr = $cr.get(0);

2.DOM对象转成jQuery对象

用$()把DOM对象包装起来就可以

var cr = document.getElementById('cr');  //DOM对象

var $cr = $(cr);   //jQ对象

1.4.3 实例研究

if(cr.checked)    //DO方式

if($cr.is(':checked'))

1.5 解决jQuery和其他库的冲突

1.6jQuery开发工具和插件

第2章 jQuery选择器

1.css选择器

2.jQ选择器

css添加样式

jQ添加行为

2.2jQ选择器的优势

1.简洁的写法

2.支持CSS1到CSS3选择器

3.完善的处理机制

判断元素存在

if($('tt').length > 0){}

if( $(‘#tt’)[0]){}

2.3 jQ选择器

基本选择器 

ID class elemrnt  selector1,selector2

层次选择器 

$(' a b')  //a里面的所有b

$('a>b')  //a元素里的子元素b

$('a+b')  //a后面的b 等价 $('a').next('b')

$('a~b')   //a后面的所有同辈b  等价$('a').nextAll('b')

$('a~b') 和 siblings()比较

$('a').siblings('b')  //选取所有同辈的b元素,无论前后

2.3.3 过滤选择器

基本过滤选择

:first :last :not(selector) :even :odd :eq(index) :gt(index) :lt(index) :header :animated :focus

内容过滤选择器

:contains(text)  :empty  :has(selector) :parent

可见性过滤

:hidden :visible 

.show() 参数是时间单位是ms  

:hidden包括 display 为none ;文本隐藏域 和visibilility:hidden之类的

属性过滤选择器 

[attribute]     例如[id]  [title]

表单选择器

5.子元素过滤

:nth-child (index /even/odd/equation) :first-child :last-child :only-child

! nth-child(index)  index从1开始   :eq(index) 是从0开始

6. 表单对象属性过滤选择器

:enabled // $(#form1 :enabled)

 :disabled //同上,用于表单元素

:checked  //$('input:checked' )  ;用于单选框,复选框

:selected //$('select option:selected') ;用于下拉列表

2.3.4 表单选择器

:input //选取所有