jQuery入门二（慕课网）笔记

林灵会灭

于 2019-07-16 10:56:57 发布

阅读量128

点赞数

分类专栏： eclipse配置文章标签： jQuery入门慕课网选择

eclipse配置专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.jQuery选择器之内容筛选选择器

在这里插入图片描述
1.1 contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
1.2 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
1.3 parent与:empty是相反的，两者所涉及的子元素，包括文本节点

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>内容筛选器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>

    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"contains"的元素节点
        //并且设置颜色
        $(".div:contains(':contains')").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"span"的元素节点
        //并且设置颜色
        $(".div:has(span)").css("color", "blue");
    </script>


    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //选择所有包含子元素或者文本的a元素
       //增加一个蓝色的边框
       $("a:parent").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
       //找到a元素下面的所有空节点(没有子元素)
       //增加一段文本与边框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>

</body>

</html>

2. jQuery选择器之可见性筛选选择器

在这里插入图片描述
:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等
我们有几种方式可以隐藏一个元素：
CSS display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0

	//查找id = div1的DOM元素,是否可见
    	show( $('#div1:visible') );

3.jQuery选择器之属性筛选选择器

在这里插入图片描述

[attr=“value”]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type=“text”],input[type=“checkbox”]等
[attr*=“value”]能在网站中帮助我们匹配不同类型的文件

	<script type="text/javascript">
         //查找所有div中，属性name=p1的div元素
          $('div[name=p1]').css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性p2的div元素
        $('div[p2]').css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
        $('div[name|="-"]').css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
         $('div[name~="a"]').css("border", "3px groove #668B8B"); 
    </script>

	<script type="text/javascript">
         //查找所有div中，属性name的值是用imooc开头的
         $('div[name^=imooc]').css("border", "3px groove red"); 
    </script>

    <script type="text/javascript">
         //查找所有div中，属性name的值是用imooc结尾的
         $('div[name$=imooc]').css("border", "3px groove blue"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性name中的值包含一个test字符串的div元素
        $('div[name*="test"]').css("border", "3px groove #00FF00"); 
    </script>

    <script type="text/javascript">
        //查找所有div中，有属性testattr中的值没有包含"true"的div
        $('div[testattr!="true"]').css("border", "3px groove #668B8B"); 
    </script>

4.jQuery选择器之子元素筛选选择器

在这里插入图片描述
4.1 irst只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
4.2 last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
如果子元素只有一个的话，:first-child与:last-child是同一个
4.3 only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
4.4 jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的；jQuery合集是从0开始索引的，所以eq(1)就是第二个元素
nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

	<script type="text/javascript">
        //查找class="first-div"下的第一个a元素
        //针对所有父级下的第一个
        $('.first-div a:first-child').css("color", "#CD00CD");
    </script>
    <script type="text/javascript">
        //查找class="last-div"下的倒数第二个a元素
        $('.last-div a:nth-last-child(2)').css("color", "red");
    </script>

5.jQuery选择器之表单元素选择器

在这里插入图片描述

	<script type="text/javascript">
        //匹配所有input元素中的单选按钮,并选中
        $('input:radio').attr('checked','true');
    </script>

6.jQuery选择器之表单对象属性筛选选择器

在这里插入图片描述
选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到元素，所以保险起见换用选择器input:checked，确保只会选取元素

<script type="text/javascript">
         //查找所有input所有勾选的元素(单选框,复选框)
         //移除input的checked属性
        $('input:checked').removeAttr('checked')
    </script>

    <script type="text/javascript">
         //查找所有option元素中,有selected属性被选中的选项
         //移除option的selected属性
        $('option:selected').removeAttr('selected')
    </script>

7.jQuery选择器之特殊选择器this

this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

var imooc = {
    name:"慕课网",
    getName:function(){
        //this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网

在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用

p.addEventListener('click',function(){
    //this === p
    //以下两者的修改都是等价的
    this.style.color = "red";
    p.style.color = "red";
},false);

把this加工成jQuery对象

$('p').click(function(){
    //把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值

8 综合案例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery标签切换效果</title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
<!--代码部分begin-->
<div id="menu">
    <!--tag标题-->
    <div id="menu_female">
        <h3>女装</h3>
        <div class="tag" style="display: block;">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.雪纺衫</a>
                    <a>4.针织衫</a>
                    <a>5.短外套</a>
                    <a>6.卫衣</a>
                    <a>7.小西裤</a>
                    <a>8.风衣</a>
                    <a>9.吊带背心</a>
                    <a>10.连衣裙</a>
                    <a name="setColor">11.蕾丝连衣裙</a>
                    <a>12.复古连衣裙</a>
                    <a>13.印花连衣裙</a>
                    <a>14.真丝连衣裙</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.背带裤</a>
                    <a>2.哈伦裤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.小脚裤</a>
                    <a>6.西装裤</a>
                    <a>7.打底裤</a>
                    <a>8.阔脚裤</a>
                    <a>9.短裤</a>
                    <a>10.马甲/背心</a>
                    <a>11.羽绒服</a>
                    <a>12.棉服</a>
                    <a>13.夹克</a>
                    <a>14.POLO衫</a>
                    <a>更多</a>
                </dd>
            </dl>
        </div>>
    </div>
    <div id="menu_con">
        <h3>男装</h3>
        <div class="tag" style="display:block">
            <dl>
                <dd>
                    <p>第一类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a name="setColor">12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>
        <div class="tag_More" style="display:block">
            <dl>
                <dd>
                    <p>第二类</p>
                    <a>1.衬衫</a>
                    <a>2.T恤</a>
                    <a>3.牛仔裤</a>
                    <a name='setColor'>4.休闲裤</a>
                    <a>5.短裤</a>
                    <a>6.针织衫</a>
                    <a>7.西服</a>
                    <a>8.西裤</a>
                    <a>9.嘻哈裤</a>
                    <a>10.西服套装</a>
                    <a>11.马甲/背心</a>
                    <a>12.羽绒服</a>
                    <a>13.棉服</a>
                    <a>14.夹克</a>
                    <p>更多</p>
                </dd>
            </dl>
        </div>>
    </div>
</div>

<script type="text/javascript">
    //找到男装下第一类衣服中的第一个p元素，并改变颜色
    //可以通过子类选择器  p:first-child 筛选出第一个p元素
    $("#menu_con div.tag dd > p:first-child").css('color','#9932CC');
</script>

<script type="text/javascript">
    //找到男装下第一类衣服把a元素从顺序1-4加上颜色
    //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素
    //注意了index是从0开始计算，所以选在1-4,为对应的index就是4
   $("#menu_con div.tag dd > a:lt(4)").css('color','red');
</script>

<script type="text/javascript">
    //找到男装所有a元素中属性名name="setColor"的元素，并设置颜色
    //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素
   $("#menu_con a[name=setColor]").css('color','blue');
</script>

<script type="text/javascript">
    //不分男女，选中第一类衣服中第9个a元素，并改变颜色
    //这里用了nth-child 选择的他们所有父元素的第n个子元素
    $(".tag a:nth-child(10)").css('color','#66CD00');
</script>

<script type="text/javascript">
    //找到女装下第一类衣服，把a元素中包含文字"更多"的节点，改变颜色
    $("#menu_female div.tag a:contains(更多)").css('color','#C71585');
</script>



</body>

</html>

结果：
在这里插入图片描述
“.tag a:nth-child(10)“因为P标签和a标签同级所以P标签页算1个子孩子，结果$(”.tag a:nth-child(10)”)是第10个元素，但是是第九个a标签。

林灵会灭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门二（慕课网）笔记

1.jQuery选择器之内容筛选选择器1.1 contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素1.2 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。1.3 parent与:empty是相反的，两者所涉及的子元素，包括文本节点<!DOCTYPE html><html&...
复制链接

扫一扫

专栏目录