jQuery的基础知识

jQuery

入口函数

jQuery的入口函数：

$(function（）{

} ）；

jQuery 入口函数与js 入口函数的对比: ·JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。 。jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery事件的链式写法

iQuery对于每一个方法，在调用成功后将返回此对像本身。 在每一个事件的内部，将会包含一个this 对像，此this是 DOM 对像，如果希望能像jQuery 对像一样使用它，必须使用S(this)将它 转成jQuery对像。 $(functionO{ $(",divTitle").click(function () {$(this) .addclass ("divCurrColor") .next(".divContent"") .css("display" ,"block"); }); });

2.5jQuery 对象和 DOM 对象

2.5.1什么是jQuery 对象?

iQuery 对象就是通过jQuery 包装 DOM 对象后产生的对象。iQuery对象是iQuery独有的。如果一个对象是jQuery 对象，那么它就可以使用jQuery 里的方法。例如: s("#test").htm1(); 意思是指: 获取ID为test 的元素内的 html代码。其中 htm1是Query 里的方法，这段代码等同于用 DOM 实现代码: document.getETementById(" test ").innerHTML:虽然jQuery 对象是包装 DOM 对象后产生的，但是Query 无法使用 DOM 对象的任何方法，同理 DOM 对象也不能使用 jQuery 里的方法

2.5.2jQuery 对象与 DOM 对象之间的转换

DOM 对象转为jQuery 对象:

对于已知的 DOM 对象，只需要用 SO 把 DOM 对象包装起来，就可以获得一个jQuery 对象了。示例代码: <input type="text"name="username” id="username" value="张老师"/><script> // 获取DOM对象 var username = document .getelementByid("username"); aTert(username .va7ue) : // 转为jQuery对象 var Susername = S(username); alert(susername.va10));</script> 转换后就可以使用jQuery 中的方法了。

jQuery 对象转为 DOM 对象:

两种转换方式将一个jQuery 对象转换成 DOM 对象: [index] 和get(index)。 (1)jQuery 对象是一个数组对象，可以通过 [index] 的方法，来得到对应的 DOM 对象。 <input type="text" name="username” id="username" value="张老师”/> cscript> // 获取jQuery对象 var Susername = S("#username") ; alert(Susername.va1()); // 转化为DOM对象 var username = Susername[O] ;aTert(username ,value);</script> (2)jQuery 本身提供，通过“.get(index)方法，得到相应的 DOM var username2 = Susername .get(0);alert(username2.value);

3.1 什么是jQuery 选择器

jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意: jQuery 选择器返回的是jQuery 对象.jQuery 选择器有很多，基本兼容了 CSS 到 CSS3 所有的选择器，并且Query 还添加了很多更加复杂的选择器。iQuery 选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

3.2 基本选择器

名称 用法 描述 ID 选择器 $("#id"); 获取指定 ID 的元素 类选择器 $(".class"); 获取同一类 class 的元素。 标签选择器 $(“div”); 获取同一类标签的所有元素 并集选择器 $("div,p,li"); 使用逼号分隔，只要符合条件之一就可。 交集选择器 $(“div.redClass"); 获取 class 为 redClass 的 div 元素。 总结: 跟 css 的选择器用法一样，只是外层加 $0。

3.2 层次选择器

名称 用法 描述 子代选择器 $(“ul>li); 使用 >号，获取儿子层级的元素。注意，并不会获取孙子层级的元素 后代选择器 $("ul li): 使用空格，代表后代选择器，获取 ul 下的所有 元素，包括孙子元素