为了账号安全,请及时绑定邮箱和手机立即绑定
  • 还要再看再看。

    查看全部
  • 需要复习。

    查看全部
  • 还需要重复回顾。

    查看全部
  • 此部分需要重点复习,容易混淆。

    查看全部
  • id 选择器只能是单个的

    类选择器和元素选择器都是可以多个

    查看全部
  • $('.pre+div') 选择后面第一个为div的兄弟节点;

    $('.pre~div')选择后面所有的为div的兄弟节点

    查看全部
    1. E会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的

    2. getElementById的参数在IE8及较低的版本不区分大小写

    3. IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A

    4. IE8及较低的版本,浏览器不支持getElementsByClassName


    查看全部
  • id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的


    查看全部
  • 比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。

    如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象


    查看全部
  • jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

    jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

    var $div = $('div') //jQuery对象
    var div = $div.get(0) //通过get方法,转化成DOM对象
    div.style.color = 'red' //操作dom对象的属性


    查看全部
  • first
    查看全部
  • <body>

        <div class="aaron">

            <p>class="aaron"</p>

            <p>选中</p>

        </div>

        <div class="aaron">

            <p>class="aaron"</p>

            <p>选中</p>

        </div>

        <div class="imooc">

            <p>class="imooc"</p>

            <p>jQuery选中</p>

        </div>

        <div class="imooc">

            <p>class="imooc"</p>

            <p>jQuery选中</p>

        </div>


        <script type="text/javascript">

        //通过原生方法处理

        //获取到所有的节点标记名为div的元素

        //给每一个div加上蓝色的边框

        var divs = document.getElementsByTagName('div');

        for (var i = 0; i < divs.length; i++) {

            divs[i].style.border = "3px solid blue";

        }

        </script>

        <script type="text/javascript">

        //通过jQuery直接传入标签名p

        //标签是可以多个的,所以得到的同样也是一个合集

        $("p").css("border", "3px solid red");

        </script>

    </body>


    查看全部
  •  <div class="aaron">

        <p>class="aaron"</p>

        <p>选中</p>

        </div>   

         <div class="aaron">

            <p>class="aaron"</p>

            <p>选中</p>

        </div>


        <div class="imooc">

            <p>class="imooc"</p>

            <p>jQuery选中</p>

        </div>

        <div class="imooc">

            <p>class="imooc"</p>

            <p>jQuery选中</p>

        </div>


        <script type="text/javascript">

            //通过原生方法处理

            //样式是可以多选的,所以得到的是一个合集

            //需要通过循环给合集中每一个元素修改样式

            var divs = document.getElementsByClassName('aaron');

            for (var i = 0; i < divs.length; i++) {

                divs[i].style.border = "3px solid blue";

            }

        </script>


        <script type="text/javascript">

            //通过jQuery直接传入class

            //class选择器可以选择多个元素

            $(".imooc").css("border", "3px solid red");

        </script>


    查看全部
  • <!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="http://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" >

                <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" >

                <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" >

                <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" >

                <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元素

       // var one=$("#menu_female .tag  dl dd > p:first-child");//女装第一类标颜色

       var two =$("#menu_con .tag dl dd p:first-child");

        two.css('color','#9932CC');

    </script>


    <script type="text/javascript">

        //找到男装下第一类衣服把a元素从顺序1-4加上颜色

        var ther=$("#menu_con .tag dl dd a:lt(4)")

        //可以通过基本筛选器lt,选择匹配集合中所有索引值小于给定index参数的元素

        //注意了index是从0开始计算,所以选在1-4,为对应的index就是4

       ther.css('color','red');

    </script>


    <script type="text/javascript">

        //找到男装所有a元素中属性名name="setColor"的元素,并设置颜色

            var thers=$("#menu_con .tag dl dd a[name='setColor']");

           alert(thers);


        //这里用的属性选择器[attribute='value']选择指定属性是给定值的元素

       thers.css('color','blue');

    </script>


    <script type="text/javascript">

        //不分男女,选中第一类衣服中第9个a元素,并改变颜色

        var t=$("dd a:nth-child(9)");

        //这里用了nth-child 选择的他们所有父元素的第n个子元素

        t.css('color','#66CD00');

    </script>


    <script type="text/javascript">

        //找到女装下第一类衣服,把a元素中包含文字"更多"的节点,改变颜色

            var nv=$("#menu_female .tag dl dd a:last")


        nv.css('color','#C71585');

    </script>




    </body>


    </html>


    查看全部
    0 采集 收起 来源:综合案例

    2018-05-16

  • jquer 子代选择器  $('div >P')

    查看全部
  • 去做些改变,带着恰到好处的冲动和自信

    查看全部

举报

0/150
提交
取消
课程须知
1、有HTML/CSS基础 2、有JavaScript基础
老师告诉你能学到什么?
1、jQuery的基础语法 2、jQuery当中的选择器 3、jQuery中的属性和样式

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!