jQuery选择器深度解析Word文件下载.docx

jQuery选择器深度解析Word文件下载.docx

《jQuery选择器深度解析Word文件下载.docx》由会员分享，可在线阅读，更多相关《jQuery选择器深度解析Word文件下载.docx（43页珍藏版）》请在冰豆网上搜索。

jQuery的text和html的区别31

js里面的innerText和innerHtml的区别32

html的知识：

文本框不能输入32

下拉列表的类型33

视频问题34

问题34

问题1jQuery中基本选择器34

问题2jQuery拥有这么多的选择器，该怎么进行选择？

好像有些内容是重复的35

jQuery选择器

jQuery选择器的分类

基本选择器

$（“id”）,根据id值找到匹配的元素，最多只返回一个元素（如果该元素存在），如果不存在，则返回一个空的jQuery对象。

$（“.class”），根据css的class属性来返回一个集合，无论该css类是否真的存在，只要定义在元素中就能被jQuery查询到。

注意跟css的区别，css可以控制所有id相同的元素的样式

jQuery1.html

<

!

DOCTYPEHTMLPUBLIC"

-//W3C//DTDHTML4.01Transitional//EN"

"

http:

//www.w3.org/TR/html4/loose.dtd"

>

html>

<

head>

title>

NewDocument<

/title>

metaname="

Generator"

content="

EditPlus"

Author"

"

Keywords"

Description"

scripttype="

text/javascript"

src="

jquery-1.8.0.js"

/script>

$（document）.ready（function（）{

//结果是1，而不是2,有多个相同id的元素只返回单个元素

alert（$（"

#test1"

）.length）;

）.text（））;

）[0].href）;

}）;

/head>

body>

aid="

test1"

href="

google<

/a>

test2"

yahoo<

/body>

/html>

class选择器

jQuery4.html

//在这个html中没有class为test的css，但是jQuery并不关心是否存在相应的css，只关心元素是否有名为test的class修饰

.test"

//结果为2

aclass="

test"

基本选择器的大例子

jQuery5.html

metahttp-equiv="

Content-Type"

text/html;

charset=utf-8"

/>

linkrel="

stylesheet"

type="

text/css"

style.css"

$（"

#button1"

）.click（function（）{

//id选择器

$（"

#one"

）.css（"

background"

"

red"

）;

}）;

#button2"

//里面隐藏了循环

//class选择器

.mini"

green"

#button3"

//标签选择器

div"

orange"

#button4"

//所有的元素

*"

blue"

#button5"

//组合

span,#two,.mini"

pink"

h3>

基本选择器<

/h3>

inputtype="

button"

value="

id="

button1"

button2"

test3"

button3"

test4"

button4"

test5"

button5"

divclass="

one"

id为one，class为one的div

<

mini"

class为mini<

/div>

two"

title="

id为two，class为one,title为test的div

<

other"

class为mini,title为other<

class为mini,title为test<

tesst"

class为mini,title为tesst<

divstyle="

display:

none;

class="

none"

style的display为"

的div<

hide"

class为“hide”的div<

div>

包含input的type为"

hidden"

size="

8"

/>

style.css

div,span,p{

width:

140px;

height:

margin:

5px;

background:

#aaa;

border:

#0001pxsolid;

float:

left;

font-size:

17px;

font-family:

Verdana;

}

div.mini{

55px;

background-color:

12px;

div.hide{

display:

层次选择器

用空格分开的层次选择器的特点

jQuery6.html

divspan"

$（"

）这个选择器选择的是div下面的span，包括它下面直接的span还有下面其他标签里面的span

例如a链接里面的span<

br>

span>

这个是div下的span<

/span>

a>

这个是a下的span<

+层次选择器

上面解释了$（"

.one+div"

）会选中的元素是哪一些

等价关系

层次选择器的大例子

jQuery7.html

//body里面的所有div改变背景色用单引号或者双引号都可以

$（'

bodydiv'

//下面这个写法跟上面的写法是一样的，但是含义不一样，上面那个是选择body下面的所有div

//$（'

div'

//直接的子元素

body>

div'

//class为one的下一个元素，在这个例子中由于很多的div的class都是one，所以它们的下一个被选中

//总共选择了四个

//这个$（"

返回的是一个集合，因为可能有很多class叫做one的元素

//下面两句话是等价的

//$（"

.one"

）.next（"

//#two后面的所有兄弟元素

#two~div"

//等价写法

#two"

）.nextAll（）.css（"

//查找同辈的div，没有上下顺序

）.siblings（"

Style.css

过滤选择器

基本过滤

基本过滤的例子

jQuery8.html

//选择第一个div元素

div:

first'

last'

//evenodd包括隐藏和孙子元素的所有元素

//even是偶数，从0开始

even"

//odd是奇数，从0开始

odd"

//div等于3的元素，即第四个

eq（3）"

#button6"

//div的class属性不为one的元素

not（.one）"

yellow"

#button7"

//div大于3的元素

gt（3）"

#abcdef"

#button8"

//div小于3的元素

lt（3）"

#fedcba"

#button9"

//<

:

header"

inputtype=