【JQuery】入门基础总结

一、前言：

        JQuery是一个优秀的JavaScript库，它能兼容CSS3以及各种浏览器，此外，JQuery还能实现动画效果，并且为网站提供AJAX交互。

二、JQuery的特点：

        ①Write less，Do more

        ②jQuery is designed to change the way that you write JavaScript.

        ③支持各种主流浏览器，包括IE6以上，FireFox2以上，Safari2以上和Opera9以上的版本。

三、核心：

        $是jquery类的一个别名，$()构造一个jQuery对象，来实现jQuery的核心功能。

        ①${表达式}：根据这个表达式来查找所有的匹配元素。

       $("div>p");查找所有p元素，且这些p元素都是div的子元素。
       $("input:radio",document.forms[0]);  //查找文档第一个表单中，所有的单选按钮。
       $(“div”,xml.responseXML);               //在一个由ajax返回的xml文档中，查所有的div元素。

        ②$(html标记字符串):根据提供的html字符串，创建jquery对象包装的dom元素。   

       $("<div><p>Hello</p></div>").appendTo("body");
       //创建一个 <input> 元素必须同时设定 type 属性
       $("<input type='text'>")

        ③ $(dom元素)：将一个或多个dom元素转换为jQuery对象。

$(document.body).css("background","black") //设置页面背景色

        ④$(document).ready(function(){})==$(function(){});//页面加载完成后自动执行的代码

三、jquery对象访问：

       eq返回的是jQuery对象，只能使用jQuery方法，get返回的是dom元素对象，只能使用dom方法。

  1、$(dom元素).each(function(){}):以每一个匹配的元素作为上下文来执行一个函数

  2、$(dom元素).size()==$(dom元素).length;对象中元素的个数。eg:<img src="test1.jpg"/> <imgsrc="test2.jpg"/>,jquery代码：$("img").size(); 返回2
       3、context：返回传给jQuery()的原始的DOM节点内容，即jQuery()的第二个参数。如果没有指定，那么context指向当前的文档(document)。
       4、$(dom元素).get()：取得所有匹配的dom元素的集合。如果你想要直接操作 DOM 对象而不是 jQuery 对象，这个函数非常有用。
       5、$(dom元素).get(index)：取得其中一个匹配的元素.
       6、$(dom元素).index():搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。

四、jQuery选择器

       在DOM编程中，我们只能使用有限的函数根据id或者TagName获取DOM对象，而在JQuery中则完全不同，JQuery提供了强大的选择器来获取页面上的对象，并且将对象以JQuery包装集的形式返回。JQuery选择器可以分为：基础选择器、层次选择器、基本过滤器、内容过滤器、可见性过滤器、内容过滤器、属性过滤器、子元素过滤器等。

        基础选择器是重中之重，大家需要牢记于心。