jQuery基础及选择器

1：获取jQuery

进入jQuery官网：http://jquery.com

2：在页面中引入jQuery

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

3：使用jQuery弹出提示框

eg:

<script> $(document).ready(function() { alert("我的第一个jQuery示例！"); }); </script>

4:window.onload 与$(document).ready()类似

5:jQuery语法规则

工厂函数$()：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

语法：$(selector).action() ;

6：jQuery操作页面元素

使用addClass( )方法为元素添加样式

语法：

jQuery 对象.addClass([样式名])；

使用css( )方法设置元素样式

语法：

css("属性","属性值") ; css({"属性1":"属性值1","属性2":"属性值2"...}) ;

使用show( )、hide( ) 方法设置元素的显示和隐藏

语法：

$(selector).show( ); $(selector).hide( );

7：jQuery代码风格

“$”等同于“jQuery”

链式操作（对一个对象进行多重操作，并将操作结果返回给该对象）

隐式迭代（设置一个风格其他的元素都保留改风格样式）

8：dom对象和jquery对象之间的区别

DOM对象，即是我们用传统的方法（iavascript）获得的对象，

Jquery对象即是用jquery类库的选择器获得的对象

jQuery对象是通过jQuery包装DOM 对象后产生的对象，它是jQuery独有的

jQuery对象中无法使用DOM对象的任何方法

9：基本选择器

$("h1").css("color", "blue"); //标签选择器

$(".price").css({"background":"#efefef","padding":"5px"});//类选择器

$("#author").css("clor", " #083499"); //id选择器

$(".intro,dt,dd").css("color", " #ff0000"); //并集选择器

$("*").css("font-weight", "bold"); //全局选择器

10：层次选择器

$(".textRight p").css("color","red"); //后代选择器

$(".textRight>p").css("color", "red"); //子选择器

$("h1+p").css("text-decoration", "underline"); //相邻元素选择器

$("h1~p").css("text-decoration", "underline"); //同辈元素选择器

11：属性选择器

$("#news a[class]").css("background","#c9cbcb");//a标签带有class属性 $("#news a[class='hot']").css("background", "#c9cbcb"); // class为hot $("#news a[class!='hot']").css("background", "#c9cbcb");// class不为hot $("#news a[href^='www']").css("background","#c9cbcb");//以www开头 $("#news a[href$='html']").css("background", "#c9cbcb");//以html结尾 $("#news a[href*='k2']").css("background","#c9cbcb"); //包含"k2"的元素

12：基本过滤选择器

:eq(index)        选取索引等于index的元素（index从0开始）        $("li:eq(1)" )选取索引等于1的<li>元素

:gt(index)         选取索引大于index的元素（index从0开始）         $("li:gt(1)" )选取索引大于1的<li>元素（注：大于1，不包括1）

:lt(index)           选取索引小于index的元素（index从0开始）        $("li:lt(1) " )选取索引小于1的<li>元素（注：小于1，不包括1）

:header              选取所有标题元素，如h1~h6               $(":header" )选取网页中所有标题元素

:focus             选取当前获取焦点的元素            $(":focus" )选取当前获取焦点的元素

:animated          选择所有动画            $(":animated" )选取当前所有动画元素

eg:

// 标题元素 $(".contain :header").css({"background":"#2a65ba",…});

// 第一个、最后一个元素 $(".contain li:first").css({"font-size":"16px",…}); $(".contain li:last").css("border","none");

// 偶数、奇数元素 $(".contain li:even").css("background","#f0f0f0"); $(".contain li:odd").css("background","#cccccc");

// 小于、大于某个索引值 $(".contain li:lt(2)").css({"color":"#708b02"}); $(".contain li:gt(3)").css({"color":"#b66302"});

13:可见性过滤选择器

通过元素显示状态来选取元素

:visible      选取所有可见的元素         $(":visible")选取所有可见的元素

:hidden         选取所有隐藏的元素               $(":hidden") 选取所有隐藏的元素

eg:

$("p:hidden").show(); $("p:visible").hide();