Go to comments

jQuery 内容筛选

内容筛选

名称说明举例
:contains(text)匹配包含给定文本的元素查找所有包含 "John" 的 div 元素:$("div:contains('John')")
:empty匹配所有不包含子元素或者文本的空元素查找所有不包含子元素或者文本的空元素:$("td:empty")
:has(selector)匹配含有选择器所匹配的元素的元素给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");
:parent匹配含有子元素或者文本的元素查找所有含有子元素或者文本的 td 元素:$("td:parent")


:contains(text) 选取含有文本内容的元素

:has() 选择指定元素的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:contains(text) :has()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{padding:30px; }
p{height:100px;width:90px; float: left;margin-left:10px; border: 1px solid #ddd;}
</style>
</head>
<body>
    <p>p1 yellow</p>
    <p>p2</p>
    <p><strong>p3</strong></p>
    <p>p4 yellow</p>
    <p>p5</p>
    <p>p6</p>
    <span style="display:block;clear:both;"><!-- 清除浮动 --></span>
    
    <script>
		//有yellow文本的p标签被选中
        $('p:contains("yellow")').css('background' ,'yellow');
        //拓展一下用法,可以做类似搜索功能
        //$('p:contains("p3")').show().siblings().hide();
        
        /*
        <p>jQuery是一个高效、精简并且功能丰富的JavaScript工具库。</p>
        <p>它提供的API易于使用且兼容众多浏览器，</p>
        <p>这让诸如HTML<strong>文档遍历和操作</strong>、事件处理、动画和Ajax操作更加简单。</p>
        <p>jQuery极大地简化了JavaScript编程。</p>
        <p>jQuery很容易学习</p>
        
        $('p:contains("JavaScript")').css('color' ,'blue');
        注意:开始用JavaScript做关键词,结果都不显示了,所以换中文关键词,要注意这一点。
        如果表达式('p:has("strong")')匹配一个<p>，那么应有一个<strong>存在于<p>后代元素中的任何地方，不是直接的子元素也可以。
        */

        
        $('p:has(strong)').css('background' ,'orange');
        /*
        因为:has()是一个jQuery延伸出来的一个选择器 。
        并且不是的CSS规范的一部分, 使用:has()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。
        为了在现代浏览器上获得更佳的性能，请使用$("p").has("strong").css('color' ,'red'); 代替。
        */
    </script>
</body>
</html>

效果

p1 yellow

p2

p3

p4 yellow

p5

p6


:parent 

选择所有含有子元素或者文本的父级元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:parent</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{padding:30px; }
p{height:100px;width:100px;float:left;margin-left:10px; border:1px solid #DDDDDD;}
</style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p></p>
    <p><a href="###"></a></p>
    <p>p5</p>
    <p>p6</p>
    <span style="display:block;clear:both;"><!-- 清除浮动 --></span>
      
    <script>
        //这个正好和:empty相反
        //含有文本,含有子元素的都被选中
        //选择所有没有子元素的元素（包括文本节点）
        $('p:parent').css('background' ,'yellow');

        /***
        因为:parent是一个jQuery 伸出来的选择器，并不是的CSS规范的一部分，
        使用:parent 查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。
        为了当使用:parent 的时候在现代浏览器上获得更佳的性能，首先使用纯CSS选择器选择元素，
        然后使用.filter(":parent").
        ***/
    </script>
</body>
</html>

效果

p1

p2


p5

p6


:empty 选择所有没有子元素的元素（包括文本节点）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:empty</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{padding:30px; }
p{height:100px;width:100px;float:left;margin-left:10px; border:1px solid #DDDDDD;}
</style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p></p>
    <p><a href="###"></a></p>
    <p>p5</p>
    <p>p6</p>
    <span style="display:block;clear:both;"><!-- 清除浮动 --></span>
    
    <script>
        // 这个和:parent选择器相反
        // 没有文本,没有元素的p标签被选中
        $('p:empty').text('text()方法添加这段文字').css('background' ,'yellow');
        
        //需要注意的一件重要的事情是:empty(和:parent)的子元素包括文本节点
    </script>
</body>
</html>

效果

p1

p2

text()方法添加这段文字

p5

p6


可见性筛选

:hidden 选取所有不可见的元素

:visible 选取所有可以见的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可见性选择器</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <!--
    可见性选择器
    1:hidden 选取所有不可见的元素
    2:visible 选取所有可以见的元素
    -->
    
    <div>我是可见的DIV</div>
    <div style="display: none;">我是不可见的DIV</div>
    
    <script>
        //alert($(':hidden').html());//选择的太多，包括html标签
        
        
        //弹出对话框："我是不可见的DIV"
        alert($('div:hidden').html());
        
        /*
        <div style="opacity:0;">我是不可见的DIV</div>
        <div style="visibility:hiden;">我是不可见的DIV</div>
        这两个div
        虽然也不可见,只是透明度变成零,
        但div还是占据空间,:hiden是选择不到的
        
        :hidden选择器条件：
        1：首先肉眼要在网页上看不到的元素
        2：这个元素不占有网页上的位置
        */
        
        
        //弹出对话框："我是可见的DIV"
        alert($('div:visible').html());
        
                /*
                为了在现代浏览器上获得更佳的性能，
                请使用.filter(":hidden/:visible")代替。
                */
    </script>
</body>
</html>


2、属性选择器

:[attr]选择拥有此属性的选择权

:[attr=value]指定属性值的选择器

:[attr1][attr2][attr3]复合属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器 01</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
body{margin: 30px;}
div,p,a{width: 100px;height: 100px;float: left; border: 1px solid #ddd;margin-left:10px; }
</style>
</head>
<body>
<!--
[name="value"] 选择指定属性是给定值的元素。
[name] 选择所有具有指定属性的元素，该属性可以是任何值。
-->
    <div title="js">DIV标签1</div>
    <div title="js">DIV标签2</div>
    <div title="js">DIV标签3</div>
    <p attrname="attrbute">自定义属性p标签</p>
    <p attrname="attrbute">自定义属性p标签</p>
    <a href="http://baidu.com" style="display:block;" >A连接</a>
    
<script>
    /*** [name="value"] ***/
    //查找下含有title=js属性div标签,填充黄色背景样式
    $('div[title=js]').css('background' ,'yellow');
    
    //属性可以自定义,不一定是html标准里的属性,只要是符合属性语法规则的,也可以获取到
    //被选中的p标签,背景样式填充橙色
    $('p[attrname=attrbute]').css('background' ,'orange');
    
    //用A标签标准的HTML属性选择,背景填充蓝色,字体颜色白色
    $('a[href="http://baidu.com"]').css({'background':'blue' ,'color':'#fff'});
</script>

</body>
</html>


Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器 02</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
*{margin:0;padding:0;}
body{margin: 30px;}
div,p,a{width:100px;height:100px;float:left;border:1px solid #ddd;margin-left:10px;}
</style>
</head>
<body>
<!--
[name="value"] 选择指定属性是给定值的元素。
[name] 选择所有具有指定属性的元素，该属性可以是任何值。
-->
    <p myattr="first" title="glee">first</p>
    <p myattr="second" title="glee">second</p>
    <p myattr="third" title="glee">third</p>
    <p myattr="fifth">fifth</p>
    <p myattr="sixth">sixth</p>
    <p myattr="seventh">seventh</p>
    
<script>
    //只要元素里有这个属性，不管属性值是什么都可以选择的到
    //含有myattr属性的p元素，选中填充黄颜色背景。
    $('[myattr]').css('background' ,'yellow');
    /*
    这种场景用的不是很多
    例：
    <a href="#" id = "xx" sendID="4">删除</a>
    ajax时比如要发过去一个id是不行的，给一个sendID
    用$('a[sendID]')来选中这个
    */
    
    //[name="value"][name2="value2"]
    //同时满足两个条件：
    //1:含有myattr属性,的p元素
    //2:属性title=glee的p元素
    //前三个p元素被选中，文本变成26px红色
    $('p[myattr][title="glee"]').css({'color':'red' ,'font-size':'26px'});

    //自己扩展一下,仅仅写属性与属性值,选择一个元素
    $('[myattr="first"]').css('border' ,'3px solid red');
    
    /*
    手册上的例子：
    <input id="man-news" name="man-news" />
    <input name="milkman" />
    <input id="letterman" name="new-letterman" /><!-- 这个input被选中 -->
    <input name="newmilk" />
    $('input[id][name$="man"]').val('only this one');
    */
</script>

</body>
</html>


Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <p>Email:<input type="text" name="email" /></p>
    <p>密码:<input type="text" name="password" /></p>
    <p>重复密码:<input type="text" name="repassword" /></p>
    <p>学号:<input type="text" name="stunum" /></p>
    <p>学分:<input type="text" name="stuscore" /></p> 
    <p><input type="password" ></p>
<script>
    $('input[name=email]').val('添加文字');
    
    //所有以stu开头的name属性的值
    $('input[name^=stu]').css('background' ,'yellow');
    
    //所有以word结尾
    $('input[name$=word]').css('border' ,'3px solid orange');
    
    //只要含有s的
    $('input[name*=s]').val('name属性含有s的的值');
</script>
</body>
</html>


三、表单选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <input type="hidden" name="" value="隐藏文本框" />
    <input type="text" name="" id="" value="文本框" />
    <input type="password" name="" id="" value="密码框" />
    <input type="button" value="按钮"/>
    <input type="submit" value="提交按钮" />
    <input type="radio" name="" id="" value="单选按钮" />
    <input type="checkbox" name="" id="" value="复选按钮"/>
    <input type="reset" value="重置按钮"/>
    <textarea name="" id="" clos="30" rews="10">文本框</textarea>
    <select name="" id="" disabled ="disabled">
        <option value="111">111</option>
        <option value="222">222</option>
        <option value="333">333</option>
    </select>
    <input type="file" name="" id=""/>
    <input type="image" src="https://www.baidu.com/img/bd_logo1.png" width="120" alt="">
    <button>按钮</button>
</form>

<script>
    //:input 选择所有的表单元素,包括input, select, button, textarea
    alert($(':input').length);//13
    //input 只选中input的标签元素
    alert($('input').length);//10

    /*
    jquery中$(":input")和$("input")有什么区别?
    1.$("form :input") 返回form中的所有表单对象，包括textarea、select、button等.
    2.$("form input")返回form中的所有input标签对象.
    3.form input 是属于层级选择器(将每一个选择器匹配到的元素合并后一起返回).
    4.form :input是属于表单选择器(匹配所有<input>、<textarea>、<select>、<button>元素).
    转自：https://zhidao.baidu.com/question/559377094938405044.html
    */

    //只选择第二个的input的type="text"
    //alert($(':text').length);//1
    
    $(':text').css('background' ,'yellow');
    
    //$(':password').css('background' ,'#FFCC22');
    //alert($(':radio').val());
    //alert($(':checkbox').val());

    //alert($('input[type=checkbox]').val());//属性选择器也是可以选择到的

    //alert($('input:hidden').val());
</script>

</body>
</html>

表单属性选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<title>表单属性选择器</title>
</head>
<body>

    <input type="text" name="" id="" value="不能修改文本框" disabled="disabled" />
    <input type="text" name="" id="" value="可以修改文本框" />
    
    <p style="background: #ddd;width:200px;height:24px;">
        <input type="checkbox" name="" id="" checked="checked" value="aaa"/>
        <input type="checkbox" name="" id="" value="bbb"/>
        <input type="checkbox" name="" id="" value="ccc"/>
    </p>
    
    <p style="background: #ddd;width:200px;height:24px;">
        <select name="" id="">
        <option value="1">第一个选项</option>
        <option value="2">第二个选项</option>
        <option value="3" selected="selected">第三个选项</option>
        </select>
    </p>

<script>
    //alert($('input:disabled').val());
    //alert($('input:enabled').val());
    //alert('input[disabled="disabled"]');
    
    //用属性选择器，属性选择器是非常有用的
    //alert($(':checked').val());
    //alert($('input[checked=checked]').val());
    //alert($(':selected').val());
    alert($('option[selected=selected]').val());
</script>
</body>
</html>

Example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单类型过滤选择器</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form action="">
    <p><input type="text" /></p>
    <p><input type="password" /></p>
    <p><input type="checkbox" /></p>
    <p><input type="radio" /></p>
</form>
<script type="text/javascript">
    $('input[type=text]').css('background' ,'blue');
    $('input:text').css('background' ,'gray');
    $('input:password').css('background' ,'yellow');
</script>
</body>
</html>

在 select 元素上添加 change 事件，将选中的 option 元素的文本写入一个 div 中。

<!DOCTYPE html>
<html>
<head>
<style>
div{color:red;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
    <select name="garden" multiple="multiple">
        <option>Flowers</option>
        <option selected="selected">Shrubs</option>
        <option>Trees</option>
        <option selected="selected">Bushes</option>
        <option>Grass</option>
        <option>Dirt</option>
    </select>
    <div></div>
<script>
$("select").change(function () {
    var str = "";
    $("select option:selected").each(function(){
        str += $(this).text()+" ";
    });
    $("div").text(str);
})
.trigger('change');
</script>
</body>
</html>


基本建议用属性选择器

名称
建议用
$(":button")

$("button, input[type='button']")

.filter(":button")
$(':checkbox')

$('input:checkbox')

[type="checkbox"]
:checked 
$("input[type=checkbox]")
$(':disabled') 
$('input:disabled')
$(':enabled') 
$('input:enabled')

$(':file')

$('input:file')[type="file"]
$(':image')
[type="image"]
$(':input')
.filter(":input")
$(':password')$('input:password')[type="password"]
$(':radio')

$('[type=radio]')

要选择一个单选按钮相关的设置，你可以使用：

$('input[name=gender]:radio')

$(':reset')
[type="reset"]
$(':selected') 
.filter(":selected")
$(':submit') 

[type="submit"]

<button type="submit">按钮</button>

$(':text')
 $('[type=text]')

虽然他们的选择的结果通常是一样的，

:disabled选择器和[disabled]属性(attribute)选择器还是有些细微的差别；

:disabled检查元素实际的disabled属性值(愚人码头注：是否被禁用，布尔值true/false)，

[disabled] 检查是否存在的disabled属性。

虽然他们的选择的结果通常是一样的，

:enabled选择器和:not([disabled])属性(attribute)选择器还是有些细微的差别；

:enabled 检查元素的disabled属性是否严格等于false，

:not([disabled]) 检查是disabled 属性（attribute）没有被设置


筛选(过滤)

名称说明举例
.eq()选择指定索引的元素
.filter(表达式)筛选指定表达式的元素
.first()选择第一个元素
.last()选择最后一个元素
.is()检测是否元素返回布尔值
.has()保留包含特定后代元素，去掉那些不含有指定后代的元素
.not()从匹配的元素集合中移除指定的元素
.map()匹配当前集合中的每个元素,产生一个包含新的jQuery对象。
.slice()根据指定的下标范围，选取匹配元素集合

.eq(index/-index)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>eq(index/-index)</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{height:100px;width:100px;border:1px solid #ddd;float:left;margin-left:10px;}
</style>
</head>
<body>
<p>第1个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<p>第6个p标签</p>

<script>
    /***
    eq(index)跟之前:eq选择器很像区别是:
    DOM方法主要用在链式操作里面,选择器主要是用在选择DOM方面(面试可能会问到)
    ***/
    
    //索引是从0开始的，第1个p标签被选中。
    $('p').eq(0).css('background' ,'red');
    
    //第2个个p标签被选中
    $('p').eq(2).css('background' ,'orange');
    
    //倒数第2个p标签,也就是正数第5个p标签被选中
    $('p').eq(-2).css('background' ,'yellow');
</script>
</body>
</html>

.filter(expr|obj|ele|fn)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>filter(expr|obj|ele|fn)</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{height:100px;width:100px;border:1px solid #ddd;float:left;margin-left:10px;}
</style>
</head>
<body>
<p>第1个p标签</p>
<p>第2个p标签</p>
<p id="third">第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<p>第6个p标签</p>
<div style="clear: both; height: 200px;"></div>

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> -two strong tags</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
  <li>list item 6</li>
</ul>

<script>
    //使用样式,选择第二个p标签
    //$('p').filter('.second').css('background' ,'red');
    
    //选中0 ,2 ,4
    //$('p').filter(':even').css('background' ,'red');
    
    //同时选中第一个与第二个p元素
    //$('p').filter(':first ,.second').css('background' ,'red');
    
    //最后一个元素
    //$('p').filter(':last').css('background' ,'red');
    

    //过滤索引值为1或id值为third的p元素
    $('p').filter(function (index) {
        return index == 1 || $(this).attr("id") == "third";
    }).css("background", "yellow");


    $('li').filter(function(index){
        //研究了半天,
        //$('strong', this).length的意思是li里有几个strong标签
        return $('strong', this).length == 2;
    }).css('background-color', 'red');
</script>
</body>
</html>


.frist()

.last()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03 frist() ,last()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{height:100px;width:100px;border:1px solid #ddd;float:left;margin-left:10px;}
</style>
</head>
<body>
<p>第1个p标签</p>
<p>第2个p标签</p>
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<p>第6个p标签</p>

<!-- 2018年3月20日 至 3月23日 这两句话,那天我正重新学这课程，二十天了还没学完，进度太慢了 -->
<span style="display:block;clear:both; margin-bottom:30px; "><!-- 清除浮动 --></span>
<div><span>你若盛开</span>，蝴蝶自来。你若精彩，<span>天自安排。</span></div>

<script>
    //选择第一个p元素
    $('p').first().css('background' ,'red');
    
    //选择第二个p元素
    $('p').last().css('background' ,'yellow');
    
    //高亮div中的第一个,第二个span
    $('div>span').first().css('color' ,'orange');
    $('div span').last().css({'background':'#FFFF33' ,'color':'#FF0088'});
</script>
</body>
</html>


.is()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04 is()检测元素返回布尔值</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{height:100px;width:100px;border:1px solid #ddd;float:left;margin-left:10px;}
</style>
</head>
<body>
<p>第1个p标签</p>
<p class="second">第2个p标签，点击行p标签背景变成红色</p><!-- 点击行p标签背景变成红色 -->
<p>第3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<p>第6个p标签</p>

<script>
    $('p').click(function(){
        if($(this).is('.second')){
            $(this).css("background", "red");
        }
    });
    
    /*
    解释：
    1:给每个p标签添加一个click事件
    2:如果当前点击的p标签包含class="second"的p元素,
    3:那么加上背景red的样式
    4:如果p标签没class="second"那么if里返回的是false
    5:就不执行添加red背景的代码
    */
</script>
</body>
</html>

02

<!DOCTYPE html>
<html>
<head>
  <style>
  div { width:60px; height:60px; margin:5px; float:left;
      border:4px outset; background:green; text-align:center;
      font-weight:bolder; cursor:pointer; }
  .blue { background:blue; }
  .red { background:red; }
  span { color:white; font-size:16px; }
  p { color:red; font-weight:bolder; background:yellow;margin:3px; clear:left; display:none;}
</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div></div>
<div class="blue"></div>
<div></div>
<div class="red"></div>
<div><br/><span>Peter</span></div>
<div class="blue"></div>
<p>&nbsp;</p>

<script>
    $("div").click(function(){
        //子元素选择器
        if ($(this).is(":first-child")) {
            $("p").text("It's the first div.");
            //.blue or .red
        } else if ($(this).is(".blue,.red")) {
            $("p").text("It's a blue or red div.");
            //内容筛选
        } else if ($(this).is(":contains('Peter')")) {
            $("p").text("It's Peter!");
        } else {
            //没有复合条件的显示下面文字
            $("p").html("It's nothing <em>special</em>.");
        }
        
        $("p").hide().slideDown("slow");
        $(this).css({"border-style":"inset", cursor:"default"});
    });
</script>
</body>
</html>

03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03 is()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
    <form><p><input type="checkbox" /></p></form>
    <div></div>
<script>
    //返回false父元素是p，去掉p标签返回true
    var isFormParent = $("input[type='checkbox']").parent().is("form");
    $("div").text("isFormParent = " + isFormParent);
</script>
</body>
</html>

04

<!DOCTYPE html>
<html>
<head>
  <style>li { cursor:pointer; }</style>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 
<ul id="browsers">
  <li>Chrome</li>
  <li>Safari</li>
  <li>Firefox</li>
  <li>Opera</li>
</ul>
<script>
/***
var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
$('li').click(function(){
    if ($alt.is(this)) {
        $(this).slideUp();
    }else{
        $(this).css("background", "red");
    }
});
1:选择索引2,4...元素
2:给每个li添加点击事件
3:凡是被第一步选中的li(2,4)元素，点击都上浮隐藏
4:其他li元素点击加红色背景
***/
//同样的效果
var $alt = $("#browsers li:nth-child(2n)").css("background", "#00FFFF");
$('li').click(function(){
    var $li = $(this);
    if($li.is($alt)){
        $li.slideUp();
    }else{
        $li.css("background", "red");
    }
});
</script>
 
</body>
</html>


.has()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05 has()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{height:100px;width:100px;border:1px solid #ddd;float:left;margin-left:10px;}
</style>
</head>
<body>
<p>第1个p标签</p>
<p>第2个p标签</p>
<p><span>第</span>3个p标签</p>
<p>第4个p标签</p>
<p>第5个p标签</p>
<p>第6个p标签</p>
<div style="clear:both;height:60px;"></div>

<ul>
    <li>Does the UL contain an LI?</li>
</ul>
<script>
    $('p').has('span').css('background' ,'orange');
    /*
    选择有span子元素的p标签
    样式加在p标签里
    <p style="background: orange;"><span>第</span>3个p标签</p>
    */
   
    $('ul').append(
        '<li>'+ 
        ($('ul').has('li').length ? 'Yes' : 'No')
        +'</li>'
        );
    $('ul').has('li').css('border' ,'1px solid red');
</script>
</body>
</html>


.not()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06 not()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{height:100px;width:100px;border:1px solid #ddd;float:left;margin-left:10px;}
</style>
</head>
<body>
<p>第1个p标签</p>
<p id="second">第2个p标签</p><!-- 这行没有改变 -->
<p>第3个p标签</p>
<p class="gelan">第4个p标签</p>
<p>第5个p标签</p><!-- 这行没有改变 -->
<p>第6个p标签</p>

<script>
    //移除#second,.gell的p元素
    //其实就是符合not()里的p都不加样式
    $('p').not('#second ,.gelan').css('background' ,'orange');
    
    //可以用表达式
    //$('p').not(':odd').css('background' ,'orange');
    //$('p').not(':first').css('background' ,'orange');
</script>
</body>
</html>


.map()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07 map()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
</style>
</head>
<body>
<input type="text" value="姓名" />
<input type="text" value="年龄" />
<input type="text" value="收入" />
<p></p>

<script>
    /*
    //1：打印每个input的值
    $('input').map(function(){
    alert($(this).val());
    });
    
    //2：
    var obj = $('input').map(function(){
    return $(this).val();
    });
    alert(typeof obj);//返回一个对象
    */
    
    var obj = $('input').map(function(){
    return $(this).val();
    }).get().join(',');
    
    //得到的值用顿号隔开，join()成为一个字符串
    //alert(typeof arr);
    
    //写入p标签
    $('p').html(obj);
</script>
</body>
</html>


.silce()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>silce()</title>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
body{margin:30px;}
p{height:100px;width:100px;border:1px solid #ddd;float:left;margin-left:10px;}
</style>
</head>
<body>
    <p>第1个p标签</p>
    <p>第2个p标签</p>
    <p>第3个p标签</p>
    <p>第4个p标签</p>
    <p>第5个p标签</p>
    <p>第6个p标签</p>

<script>
    //下标从第一个开始到第五个元素，但不包括第五个元素
    //永数学上的区间法表示:[1,5)
    //第一个索引有，第二个索引没有(1~4)
    $('p').slice(1 ,5).css('background' ,'yellow');

    //索引 2 ,3 ,4...
    $('p').slice(2).css('color' ,'blue');
    
    //从负三到负一，但不包括负一(-3~-2)
    $('p').slice(-3 ,-1).css('border' ,'3px solid red');
</script>
</body>
</html>



Leave a comment 0 Comments.

Leave a Reply

换一张