首页 > 代码库 > python_way day16 JQuary

python_way day16 JQuary

2024-08-10 19:59:00   223人阅读

python_way day16 JQuery

封装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="http://www.mamicode.com/js/jquery-3.1.0.js"></script></body></html>
JavaScript 代码：
$(".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="http://www.mamicode.com/js/jquery-3.1.0.js"></script></body></html>
JavaScript 代码

　过滤　

$(‘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="http://www.mamicode.com/js/jquery-3.1.0.js"></script></body></html>
JavaScript 代码

 

nextUntil([e|e][,f])  直到找到谁停止

$(‘#term-2‘).nextUntil(‘div‘)    //找到id=term-2的标签的儿子所有标签，筛选查找，直到找到div标签停止[<dd>?definition 2-a?</dd>?]

　　

　

　　

　

　　

　　

 

  • nextUntil([e|e][,f])

python_way day16 JQuary


联系
我们