jQuery学习笔记（2）（语法与选择器）

jQuery学习笔记（2）

jQuery语法

1.用美元符定义
2.用（）来选择html中的元素
3.用 方法名（）来执行方向
美元符（要查找的html元素的id或class等）.action();
例：$("#id").click();

jQuery的入口函数

1.jQuery入口函数的标准写法

$(document).ready(function(){
});

2.jQuery入口函数简单版

$(function(){
});

（注：两者没有区别，写在一起时是不会相互覆盖的）
3.js的入口函数

window.onload= function(){
};

4.当三者同时运行时
jQuery的入口函数比js的入口函数执行的快
jQuery的入口函数会等待页面加载完才执行，但不会等待图片加载
js的入口函数会等待页面和图片都加载完才执行
（注：当有很多图片的网页时要用jQuery的入口函数）

jQuery选择器

jQuery的选择器与css的选择器十分类似,语法也基本相同

1.id选择器

#要选择元素的id名
例：

$("#dyc").addClass("wr");

2.class选择器

.要选择的元素的class名
例：

$(".dyc").hide();

3.element选择器

要选择的元素

$("button").click();

4.*选择器

选择全部元素

$("*");

6.this选择器

1.选择当前html元素

$("this").hide();

7.交集选择器

$("s1s2").hide();

8.并集选择器

$("s1,s2").hide();

9.后代选择器

选择某元素的所有后代

$("#father p").css("color","red");

以下0和3变红

<div id="father">
	<p>0</p>
	<div>1</div>
	<span>2</span>
	<p>3</p>
</div>

10.子代选择器

选择某原色的直接子代

$("#fathe>p").css("color","red");

以只有下0和3变红，2不是直接子代

<div id="father">
	<p>0</p>
	<div>
		<p>2</p>
	</div>
	<span>2</span>
	<p>3</p>
</div>

11.不知道叫什么选择器

1.选择某元素的第一个与最后一个

$(document).ready(function(){
	$("p:first").css("color","red");
	$("p:last").css("color","red");
});

以下1和3会变成红色

<p>1<p>
<p>2<p>
<p>3<p>

2.选择确定某个位置的元素

$(document).ready(function(){
	$("li:eq(1)").css("color","red");
});

以下1会变成红色，（注：从0开始遍历所以1的位置是第二个）

<ul>
	<li>0</li>
	<li>1</li>
	<li>2</li>
</ul>

3.选择奇数或偶数的元素

$(document).ready(function(){
	$(li:even).css("color","red");<!-- 选取偶数行的li -->
	$(li:odd).css("color","blue");<!-- 选取奇数行的li -->
});

以下0与2变红，1与3变蓝（注：同样的问题，从零开始遍历所以偶数是第0行与第2行）

<ul>
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

4.选择大于第n行或小与第n行的元素

$(document).ready(function () {
            $('ul li:gt(2)').css('color', 'red');
            $('ul li:lt(2)').css('color', 'blue');
        });

以下0与1变红，3与4变蓝

<ul>
	<li>0</li>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>