一、前言:
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选择器可以分为:基础选择器、层次选择器、基本过滤器、内容过滤器、可见性过滤器、内容过滤器、属性过滤器、子元素过滤器等。
基础选择器是重中之重,大家需要牢记于心。