标签:
封装dom js代码
1.12.. --> ...
2.x --> IE9
查找:
1.选择器:直接找到弄一个或者某些标签
2.筛选器:找到标签进行筛选
操作:
css
属性
文本操作
定义事件:
找到标签,绑定事件。
扩展:
执行函数: $.xxx
Ajax:
偷偷发请求
1,筛选器
#id 地选择器
标签选择器
class选择器
* 所有
组合选择器:#i1,#i2,#i3
层级选择器:#i1 .c1 到i1标签的子子孙孙里找
parent >child:到孩子的层级找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="item">
<a>百度</a>
</div>
<div class="item">
<div id="i1"></div>
</div>
<div class="item"></div>
</div>
<script src="js/jquery-3.1.0.js"></script>
</body>
</html>
$(".item") //class选择器
[<div class=?"item">?…?</div>?, <div class=?"item">?</div>?, <div class=?"item">?</div>?]
$(".item a") //层级选择器
[<a>?百度?</a>?]
$(".item a").addClass(‘hide‘)
[<a class=?"hide">?百度?</a>?]
$(".item a").removeClass(‘hide‘)
[<a class>?百度?</a>?]
$("div") //标签选择器
[<div>?…?</div>?, <div class=?"item">?…?</div>?, <div class=?"item">?</div>?, <div class=?"item">?</div>?]
$("#i1") //id选择器
[<div id=?"i1">?</div>?]
$("a,#i1") //组合选择器
[<a>?百度?</a>?, <div id=?"i1">?</div>?]
$(".item:first") //找众多的item中的第一个标签
[<div class=?"item">?…?</div>?]
:not(selector)不是的
:even 奇数
:odd 偶数
:eq(index)索引位置
:gt(index)大于
:it(index)小于
属性,子元素,表单,
<div class="item">
<input type="text" disabled> //这个text的input变成disabled不可写的
</div>
表单选择器:
$(":text")[0]
<input type=?"text" disabled>?
inp = $(":text")[0]
$("div")
[<div>?…?</div>?, <div class=?"item">?…?</div>?, <div class=?"item">?…?</div>?, <div id=?"i1">?</div>?, <div class=?"item">?…?</div>?]
$("div:eq(1)") //索引
[<div class=?"item">?…?</div>?]
二、筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="item">
<a>百度</a>
</div>
<div class="item">
<div id="i1"></div>
</div>
<div class="item">
<span class="item"></span>
<input type="text" disabled>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
</body>
</html>
过滤
$(‘div‘).eq(1)
[<div class=?"item">?…?</div>?]
$(‘div‘).first()
[<div>?…?</div>?]
$(‘div‘).last()
[<div class=?"item">?…?</div>?]
$(".item").is("div") //做判断使用
true
查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<div>asdf</div>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
<script src="js/jquery-3.1.0.js"></script>
</body>
</html>
nextUntil([e|e][,f]) 直到找到谁停止
$(‘#term-2‘).nextUntil(‘div‘) //找到id=term-2的标签的儿子所有标签,筛选查找,直到找到div标签停止 [<dd>?definition 2-a?</dd>?]
标签:
原文地址:http://www.cnblogs.com/python-way/p/5808975.html