jQuery基础及选择器

一、jQuery基础

jQuery语法

基础语法：$(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

jQuery入口函数：

$(document).ready(function(){
       //执行代码
});
或者
$(function(){
       //执行代码
});

jQuery用法

ready()方法

<!-- 为页面加载事件绑定 -->
<script>
    $(document).ready(function(){
         alert("我是jQuery示例")
});
</script>

addClass()、css方法

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

$("tr:odd").addClass("odd");

$("tr:even").addClass("even");

css方法设置元素样式

$(this).css({"background":"black"});

show()、hide()方法

设置元素的显示和隐藏

$(this).children("div").show();  显示

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

next()方法/链式操作

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

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

DOM对象和jQuery对象

DOM对象是我们用传统的方法(javascript)获得的对象。

jQuery对象是用jQuery类库的选择器获得的对象。

var domObj = document.getElementById("id");   //DOM对象
var obj=("#id");    //jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法，如下：

$("#foo").html();  获得ID为foo的元素内的HTML代码。

二、jQuery选择器

一、基本选择器：

1.标签和ID选择器：

#id

h1 标签

2.类选择器：

.class 类

3.并集选择器：

.intro,dt,dd 并集

4.全局选择器：

*全局

二、层次选择器：

.textRight p   后代选择器

.textRight>p    子选择器

h1+p   相邻选择器

h1~p    同辈元素选择器

三、属性选择器：

#news a[class]   a标签带有class属性

a[class='hot']     class为hot

a[class!='hot']    class不为hot

a[href^='www']     以www开头

a[href$='html']     以html结尾

a[href*='k2']        包含"k2"的元素

四、过滤选择器：

:eq(index)   选取索引等于index的元素从0开始

:gt(index)    选取索引大于index的元素从0开始

:It(index)    选取索引小于index的元素从0开始

:header    选取所有标题元素，如h1~h6

:focus    选取当前获取焦点的元素

:animated   选择所有动画

$(".contain :header").css({"background":"#fff"});   //标题元素
$(".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":"red"});       //小于某个索引值
$(".contain li:gt(3)").css({"color":"green"});       //大于某个索引值