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

jQuery基础 (一)—样式篇

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

    dom对象转化成jQuery对象

    $(dom)方法    可以将dom对象转化为jQuery对象

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

    2018-09-04

  • qq_古娜拉黑暗之神_1

    jQuery对象转化为dom对象

    注意：jQuery对象是一个类数组对象

    1. 利用数组下标的方式读取jQuery中的dom对象

    var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性



2.jQuery自带的get（）方法

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
    查看全部
    0 采集 收起 来源：jQuery对象转化成DOM对象

    2018-09-04

  • qq_古娜拉黑暗之神_1

    jquery对象与dom对象

    dom对象：通过dom模型提供的方法获取的dom元素就是一个dom对象

    jQuery对象：例：var $p=$('#imooc'); 通过此方法会得到一个$p的jQuery对象，$p是一个类数组对象，里面不光包含了dom对象的信息，还有很多操作方法，通过调用自己的方法HTML与css来实现效果。

    查看全部
    0 采集 收起 来源：jQuery对象与DOM对象

    2018-09-04

  • qq_古娜拉黑暗之神_1

    jquery格式

    例：$(document).ready(  );  等页面的文档（document）中的节点都加载完毕后，再执行后续的代码。

    $符号为jQuery对象的缩写形式

    通过$(   )函数来获取页面中的元素

    查看全部
    0 采集 收起 来源：jQueryHelloWorld体验

    2018-09-04

  • qq_古娜拉黑暗之神_1

    jQuery

    1. 使用：在页面<head>标签内通过script标签引入jQuery库。


    查看全部
    0 采集 收起 来源：环境搭建

    2018-09-04

  • 修风信子

    1. jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

    2. 数组的索引是从0开始的，也就是第一个元素下标是0

    3. 转换的2中方式：（1）数组下标；（2）get（）方法

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

    2018-09-02

  • 修风信子

    1. 通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

    2. 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。


    查看全部
    0 采集 收起 来源：jQuery对象与DOM对象

    2018-09-02

  • 慕容凌风

    $("input:enabled")查找所有input所有可用的（未被禁用的元素）input元素。

      $("input:disabled")查找所有input所有不可用的（被禁用的元素）input元素。

      $("input:checked").removeAttr('checked')  查找所有input所有勾选的元素(单选框,复选框)，移除input的checked属性

      $("option:selected").removeAttr('selected') 查找所有option元素中,有selected属性被选中的选项，移除option的selected属性


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

    2018-08-31

  • 慕容凌风

    $(":input") 查找所有 input, textarea, select 和 button 元素

      :input 选择器基本上选择所有表单控件

      $("input:text")匹配所有input元素中类型为text的input元素

      $("inout:password")匹配所有input元素中类型为password的input元素

      $("input:radio")匹配所有input元素中的单选按钮,并选中

      $("input:checkbox")匹配所有input元素中的复选按钮,并选中

      $("input:submit")匹配所有input元素中的提交的按钮,修改背景颜色

      $("input:image")匹配所有input元素中的图像类型的元素,修改背景颜色

      $("input:button")匹配所有input元素中类型为按钮的元素

      $("input:file")匹配所有input元素中类型为file的元素


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

    2018-08-31

  • 慕容凌风

    $("div[name=p1]")查找所有div中，属性name=p1的div元素

    $("div[p2]")查找所有div中，有属性p2的div元素

    $("div[name|="-"]")查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

    $("div[name~="a"]")查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素

    $("div[name^=imooc]")查找所有div中，属性name的值是用imooc开头的

    $("div[name$=imooc]")查找所有div中，属性name的值是用imooc结尾的

    $("div[name*="test"]") 查找所有div中，有属性name中的值包含一个test字符串的div元素

    $("div[testattr!="true"]")查找所有div中，有属性testattr中的值没有包含"true"的div


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

    2018-08-30

  • 慕容凌风

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

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

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

    show( $("#div1:hidden") );查找id = div1的DOM元素,是否隐藏


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

    2018-08-30

  • Te_Fuir

    $( "parent > child" ) 
    子选择器：选择所有指定“parent”元素中指定的"child"的直接子元素。

    $("ancestor descendant")
    后代选择器：选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子，孙子，曾孙等

    $("prev + next")
    相邻兄弟选择器：选择所有紧接在“prev”元素后的“next”元素

    $("prev ~ siblings")
    一般兄弟选择器：匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器

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

    2018-08-30

  • 慕容凌风

    $('div > p') 选择所有div元素里面的子元素P

    $('div  p') 选择所有div元素里面的p元素

    $(".prev + div")选取prev后面的第一个的div兄弟节点

     $("prev ~ div")选取prev后面的所有的div兄弟节点


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

    2018-08-30

  • 付之一笑的回忆

    jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

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

    2018-08-29

  • 石榴笑了

    <!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 dd p~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 dd>a:contains('更多')").css('color','#C71585');

    </script>




    </body>


    </html>


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

    2018-08-26

  • 石榴笑了

    <!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 dd p~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 dd>a:contains('更多')").css('color','#C71585');

    </script>




    </body>


    </html>


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

    2018-08-26

  • T松子

    contains：针对文本

    has：针对元素

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

    2018-08-25

首页上一页80818283848586下一页尾页

举报

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

微信扫码，参与3人拼团

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

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

查看已购买的课程