为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 jQuery基础 (一)—样式篇 笔记

jQuery基础 (一)—样式篇

Aaron艾伦 Web前端工程师
查看讲师更多课程 Aaron艾伦讲师的其他课程
难度入门
时长 2小时23分
学习人数
综合评分9.30
1025人评价 查看评价
9.6 内容实用
9.2 简洁易懂
9.1 逻辑清晰
最热 最新
  • qq_慕斯卡7195778

    选择所有包含指定文本的元素
    :contains()选择器中括号内的文字，可为纯文本，或用引号包围

    查看全部
    0 采集 收起 来源：练习题

    2019-10-23

  • qq_慕斯卡7195778

    jQuery 表单对象属性筛选选择器

    $(":enabled")  选取可用的表单元素

    $(":disabled")  选取不可用的表单元素

    $(":checked") 选取被选中的input元素

    $(":selected")  选取未被选中的option元素

    注意事项：

    1. 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

    2. 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素


    查看全部
    0 采集 收起 来源：jQuery选择器之表单对象属性筛选选择器

    2019-10-23

  • qq_慕斯卡7195778

    1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

    2. :last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

    3. 如果子元素只有一个的话，:first-child与:last-child是同一个

    4.  :only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

    5. jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

    6. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算


    查看全部
    0 采集 收起 来源：jQuery选择器之子元素筛选选择器

    2019-10-23

  • qq_慕斯卡7195778

    visible的意思就是可见，而hidden就是隐藏。show(  $('#div3:visible') )说的是把一个名字是div3的dom元素设置为可见

    查看全部
    0 采集 收起 来源：jQuery选择器之可见性筛选选择器

    2019-10-18

  • qq_慕斯卡7195778

    $("input:not(:checked)");简单说，这句代码意思是：查找input中没有被勾选的其他元素

    查看全部
    0 采集 收起 来源：jQuery选择器之基本筛选选择器

    2019-10-18

  • qq_慕斯卡7195778

    解析：$( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。 $("ancestor descendant") 后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等 $("prev + next") 相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素 $("prev ~ siblings") 一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器 $( "parent > child" ) 子选择器：选择所有指定“parent”元素中指定的"child"的直接子

    查看全部
    0 采集 收起 来源：练习题

    2019-10-16

  • qq_慕斯卡7195778 
    $( ".class" )

    类选择器，相对id选择器来说，效率相对会低一点，但是优势就是可以多选


    查看全部
    0 采集 收起 来源：jQuery选择器之类选择器

    2019-10-16

  • Humble678
    .html与.text的方法操作是一样，只是在具体针对处理对象不同 .html处理的是元素内容，.text处理的是文本内容 .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器
    查看全部
    0 采集 收起 来源：jQuery的属性与样式之html()及.text()

    2019-10-16

  • Humble678
    this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。 $(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
    查看全部
    0 采集 收起 来源：jQuery选择器之特殊选择器this

    2019-10-16

  • fordzw_429

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

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

        $("#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 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个子元素

        $("#menu div.tag a:nth-child(10)").css('color','#66CD00');

    </script>


    <script type="text/javascript">

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

        $("#menu_female div.tag dd a:nth-last-child(1)").css('color','#C71585');

    </script>




    </body>


    </html>


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

    2019-10-14

  • fordzw_429

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

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

        $("#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 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个子元素

        $("#menu div.tag a:nth-child(10)").css('color','#66CD00');

    </script>


    <script type="text/javascript">

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

        $("#menu_female div.tag dd a:nth-last-child(1)").css('color','#C71585');

    </script>




    </body>


    </html>


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

    2019-10-14

  • woaixuexi3946647

    Attribute就是dom节点自带的属性

    例如：html中常用的id、class、title、align等：

    Property是这个DOM元素作为对象的属性

    例如：tagName, nodeName

    获取Attribute就需要用attr，获取Property就需要用prop


    查看全部
    0 采集 收起 来源：jQuery的属性与样式之.attr()与.removeAttr()

    2019-10-14

  • 慕的地8556979

    几种方式可以隐藏一个元素：

    1. CSS display的值是none。

    2. type="hidden"的表单元素。

    3. 宽度和高度都显式设置为0。

    4. 一个祖先元素是隐藏的，该元素是不会在页面上显示

    5. CSS visibility的值是hidden

    6. CSS opacity的指是0

    如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

    元素隐藏也就课程说的几种方法    透明度：那设置透明后元素本身还是在那里 占用了空间  只是我们看不见而已  给他绑定事件点击也是有反应的  visibility 和 dispaly 属性 两者都可以实现隐藏元素的效果  不同的是第一个隐藏后位置依然被占据着  后面写的东西会跟在该元素的后面  不会占用之前隐藏元素的位置  第二个属性设置后元素就彻底在页面中消失了 不会占据空间   利用position也可以实现元素隐藏和显示  定位有四种  你可以了解下  默认relative 就是正常的文档流  还有课程提到的设置高度和宽度为0来显示隐藏，既然都没有高度和宽度了 肯定不会占用空间  需要注意的是有时候使用float会对正常文档流产生的影响，只要记得用完浮动清一下就好了

    查看全部
    0 采集 收起 来源：jQuery选择器之可见性筛选选择器

    2019-10-12

  • 唐灬朝

    元素标签的所有节点

    查看全部
    0 采集 收起 来源：jQuery选择器之元素选择器

    2019-10-12

  • 慕的地8556979

    jQuery的基本筛选选择器

    :not(selector){选中没有selector的元素}

    注意事项：

    1. :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引

    2. gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始


    查看全部
    0 采集 收起 来源：jQuery选择器之基本筛选选择器

    2019-10-12

  • saber天下第一 
    $("div >  p")//子级选择器 选择直接子元素
$("div p")//后代选择器 选择所有后代 包含子级选择器的结果
$("div + p")//相邻兄弟选择器 选择下一个兄弟元素
$("div ~ p")//一般兄弟选择器 选择之后的所有兄弟元素 包含相邻兄弟选择器的结果


    查看全部
    2 采集 收起 来源：jQuery选择器之层级选择器

    2019-10-12

  • qq_慕斯卡7195778

    http应该为https，就有颜色了

    查看全部
    1 采集 收起 来源：DOM对象转化成jQuery对象

    2019-10-10

首页上一页24252627282930下一页尾页

举报

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

微信扫码，参与3人拼团

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

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

查看已购买的课程