2017.11.20笔记

jQuery 的理念是：write less,do more。

jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。

1.jQuery优势

轻量级。压缩后可以保持在30kb左右。 
强大的选择器。可以使用CSS1-CSS3几乎所有选择器。 
出色的DOM操作的封装。 
可靠的事件处理机制。 
完善的Ajax。 
不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。

2.使用jQuery

jQuery 库文件一般有生产版和开发版。区别在于生产版经过了压缩，只有30kb左右，我们下载使用开发版就可以了。

使用时，在页面引入 jquery.js 库文件就可以使用了。

<script type="text/javascript" src="js/jquery.js"></script>
1

简单编写jQuery:

$(document).ready(function(){            alert('Hello jQuery');        });
1
2
3

window.onload方法和$(document).ready(）方法的区别。

window.onload必须等待网页中所有内容加在完毕才能执行。 
$(document).ready(）是网页中所有DOM结构绘制完成后就执行，可能DOM元素关联的东西并没有加载。 
链式风格

//等待dom元素加载完毕.

$(document).ready(function(){    $(".level1 > a").click(function(){        $(this).addClass("current")   //给当前元素添加"current"样式        .next().show()                //下一个元素显示        .parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式        .next().hide();                //它们的下一个元素隐藏        return false;//事件处理阻止了默认的事件行为并停止了事件通过dom向上冒泡    });});
1
2
3
4
5
6
7
8
9

jQuery对象和DOM对象 
1.jQuery对象 
jQuery对象是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的。拥有jQuery里面的方法。

例如：

lg($('#dd'));lg(document.getElementById('dd'));
1
2
3

jQuery对象中无法使用DOM对象的任何方法。 
DOM对象也不能使用jQuery里面的方法。 
2.JQuery对象和DOM对象的相互转换。 
jQuery提供了两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。 
//第一种方法

lg($('#dd'));lg($('#dd')[0]);
1
2

//第二种方法

lg($('#dd'));lg($('#dd').get(0));
1
2

DOM对象转化成jQuery对象。 
只需要把DOM对象包装起来，既可以获得一个jQuery对象了。

    var dd = document.getElementById('dd');    var $dd = $(dd);    lg($dd);
1
2
3

jQuery选择器

1.基本选择器

选择器描述id根据给定的ID匹配一个元素.class根据给定的类名匹配元素element根据给定元素名匹配元素*匹配所有元素selector1,selector2,selector3将每一个选择器匹配到的元素合并返回

2.层次选择器

选择器描述$(‘a d’)选取a元素里所有的d后代元素$(‘p>c’)选取p元素下的c子元素$(‘prev+next’)选取紧邻在prev元素后的next元素$(‘prev~siblings’)选取prev元素之后的所有siblings兄弟元素

3.过滤选择器

选择器描述:first选取第一个元素:last选取最后一个元素:not(selector)去除所有与指定选择器匹配的元素:even选取所有索引是偶数的元素:odd选取所有索引是奇数的元素:containes(text)选取所有文本内容为’text’的元素:empty选取不包含子元素或者文本的空元素:has选取含有选择器所匹配的元素的元素[attr]选取拥有此属性的元素[attr = value]选取属性值为value的元素[attr^=value]选取属性值以value开头的元素[attr$=value]选取属性值以value结束的元素[attr*=value]选取属性值含有value的元素:nth-child(index)选取父元素下第index个子元素或者奇偶元素:first-child选取父元素的第一个子元素:last-child选取每个父元素的最后一个子元素