jquery基础及选择器

jquery库文件

分为开发版和发布版

在页面中引用jquery

使用jquery弹出提示框

$(document).ready(function() {

alert("我的第一个jQuery示例！");

});

</script>

jquery语法规则

工厂函数￥（）：将DOM对象转化为jquery对象

jquery操作页面元素

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

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

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

addClass（）方法 --为元素添加样式

语法：jQuery 对象.addClass([样式名]);

示例：$("tr:odd").addClass("odd");

css()方法 --设置元素样式

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

示例：$(this).css({"background":"#c81623"});

设置元素的显示和隐藏

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

$(selector).hide( );

示例：$(this).children("div").show();

$(this).children("div").hide();

jquery代码分割

$等同于jquery

$（document）.ready（）等同于jquery（document）.ready（）

$（function(){}）等同于jquery（function（）{...}}）

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

示例：

$("h2").css("background-color","#ccffff").next().css("display","block");

隐式操作

示例：

$(document).ready(function() {

$("li").css({"font-weight":"bold","color":"red"});

});

jquery选择器分类

基本选择器

示例：

$("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"); //全局选择器

层次选择器

示例：

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

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

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

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

属性选择器

示例：

$("#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"的元素

基本过滤选择器

语法	描述	示例
: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" )选取当前所有动画元素

示例：

// 标题元素

$(".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"});

可见性过滤选择器

语法	描述	示例
:visible	选取所有可见的元素	$(":visible")选取所有可见的元素
:hidden	选取所有隐藏的元素	$(":hidden") 选取所有隐藏的元素

示例：

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

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