首页 > 代码库 > python_way day16 JQuary

python_way day16 JQuary

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