码迷,mamicode.com
首页 > 编程语言 > 详细

python_way day16 JQuary

时间:2016-08-26 09:02:23      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

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="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="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="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>?]

  

 

  

 

  

  

 

python_way day16 JQuary

标签:

原文地址:http://www.cnblogs.com/python-way/p/5808975.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!