为了账号安全,请及时绑定邮箱和手机立即绑定
  • :disabled 选择器选取所有禁用的表单元素。

    :enabled 选择器选取所有启用的表单元素。

    :checked 选择器选取所有选中的复选框或单选按钮。

    :selected 选择器选取被选择的 <option> 元素。

    查看全部
  • .html与.text的异同:

    1. .html与.text的方法操作是一样,只是在具体针对处理对象不同

    2. .html处理的是元素内容,.text处理的是文本内容

    3. .html只能使用在HTML文档中,.text 在XML 和 HTML 文档中都能使用

    4. 如果处理的对象只有一个子文本节点,那么html处理的结果与text是一样的

    5. 火狐不支持innerText属性,用了类似的textContent属性,.text()方法综合了2个属性的支持,所以可以兼容所有浏览器


    查看全部
  • attr()有4个表达式

    1. attr(传入属性名):获取属性的值

    2. attr(属性名, 属性值):设置属性的值

    3. attr(属性名,函数值):设置属性的函数值

    4. attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }


    查看全部
  • 除了表单元素选择器外,表单对象属性筛选选择器也是专门针对表单元素的选择器,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行筛选

    表单筛选选择器的描述:

    55920c2f0001198b04940201.jpg


    查看全部
  • 表单选择器的具体方法描述:

    5592040d0001f8eb04940441.jpg

    查看全部
  • 筛选选择器用来筛选其前面已匹配的元素集合.根据之前匹配的元素在进一步筛选,用法与CSS中的伪元素相似,筛选选择器用冒号“:”开头. 

    匹配的元素集合:first-child 老大筛选器 //在匹配的集合中找出是他爹的第一个孩子的那些

    匹配的元素集合:last-child 老幺筛选器 //在匹配的集合中找出是他爹的最后一个孩子的那些

    匹配的元素集合:only-child 独生子女筛选器 //在匹配的集合中找出是他爹的独生子女的那些

    匹配的元素集合:nth-child(n) 排行老几筛选器 //在匹配的集合中找出是他爹的第n个孩子的那些

    匹配的元素集合:nth-last-child(n) 排行倒数老几筛选器 //在匹配的集合中找出是他爹的倒数第n个孩子的那些

    例:

    男人:first-child 老大筛选器  //找出这些男人中是他爹的第一个孩子的那些

    查看全部

  • 属性筛选选择器:57d654200001c46507360560.jpg


    查看全部
  • 注意: 方括号前没有冒号: 


    实例说明

    1, $("input[name^='nation']"); //选取所有带有以 "nation" 开头的 name 属性的 <input> 元素.

    "匹配的元素集合[attribute^=value]" 在匹配的元素集合中选取所有带有指定属性且属性值以指定字符串开头的元素。不必是单词.

    2, $("p[title|='Tomorrow']") //选取所有带有属性title值以 "Tomorrow" 开头的  <p> 元素.

    [attribute|=value] 选择器选取所有带有指定属性且属性值以指定单词开头(单词后可以跟连字符-)的元素。该选择器经常用于处理 language 属性。

    3, $("input[name~='nation']"); //选取所有带有包含单词 "nation" 的 name 属性的 <input> 元素.

    [attribute~=value] 选择器选取所有带有指定属性且属性值包含指定单词的元素。单词单词完整单词.

    4, $("input[name*='nation']"); //选取所有带有包含字符串 "nation" 的 name 属性的 <input> 元素.

    [attribute*=value] 选择器选取所有带有指定属性且属性值包含指定字符串的元素。

    5, $("a[href$='.org']"); //选取所有带有以 ".org" 结尾的 href 属性的 <a> 元素.

    [attribute$=value] 选择器选取所有带有指定属性且属性值以指定字符串结尾的元素。

    6, $("p[class!='intro']"); //选取所有 class 属性值不为 "intro" 的 <p> 元素.

    [attribute!=value] 选择器选取所有不带有指定属性和属性值的元素。带有指定的属性,但不带有指定的属性值的元素,也会被选择。

    7, $("[id=choose]"); //选取 id 属性值为 "choose" 的每个元素.

    [attribute=value] 选择器选取所有带有指定属性和属性值的元素。

    8, $("[id]"); //选取带有 id 属性的每个元素.

    [attribute] 选择器选取带有指定属性的所有元素。



    查看全部
  • jQuery选择器之可见性筛选选择器

    $(":visible");  //[在集合中]选择所有的可见元素(占空间)

    $(":hidden"); //[在集合中]选择所有的隐藏元素(不占空间)

    隐藏元素的方法有:

    1. CSS display的值是none。

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

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

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

    5. CSS visibility的值是hidden

    6. CSS opacity的指是0

    但是:

    1,可见性选择器认为,占据空间便是可见的,如果元素占据文档的空间,元素被认为是可见的.可见的元素的宽高均大于0.

    2,元素的CSS样式为visibility:hidden 或 opacity:0 被认为是可见的,因为它们仍占用空间布局.

    3,所以满足选择器visibility:hidden的只有3种:1,CSS display的值是none。2,宽度和高度都显式设置为0。

    3,type="hidden"的表单元素

    另 注:     instanceof 是一个二元操作符 ,

    语法:   左侧对象 instanceof 对象类型

    作用: 判断其左边对象是否为其右边类的实例,返回boolean类型的数据。

    如: oString instanceof String //这段代码问的是“变量 oString 是否为 String 对象的实例?”

    oString的确是 String 对象的实例,因此结果是"true"。


    查看全部
  • jQuery选择器之内容筛选选择器

    :contains(要查找的文本)  选择所有包含指定文本的元素

    :contains()选择器中括号内的文字,可为纯文本,或用引号包围.注意:文本是大小写敏感的。

    $("匹配的集合:has(selector)") //在匹配的元素集合中选择包含'括号内一个或多个选择器'在其内的元素 例:$("div:has(span,p,li)") 

    $("匹配的集合:empty") //固定单词,在匹配的集合中选择空元素,空元素指的是不包含子元素或文本的元素。例:$("div:empty");

    $("匹配的集合:parent") //固定单词,在匹配的集合中选择父级元素 例:$("div:parent") 父级元素指的是含有子元素或者文本.



    查看全部
  • 57cd1df2000146de06020498.jpg


    筛选选择器用来筛选其前面已匹配的元素集合.根据之前匹配的元素在进一步筛选,用法与CSS中的伪元素相似,筛选选择器用冒号“:”开头. ,集合都是从0开始索引

    $("匹配的集合:first") //在匹配的集合中选择第一个元素

    $("匹配的集合:last") //在匹配的集合中选择最后一个元素

    $("匹配集合:even") //选择匹配集合中的索引值为偶数的元素,从0开始计数

    $("集合:odd") //选择集合中的索引值为奇数的元素,从0开始计数

    $("集合:eq(index)") //在匹配的集合中选择索引值为index的元素

    $("集合:gt(i)") //选择集合中的索引值大于i(不包括i)的元素

    $("集合:lt(i)")  //选择集合中的索引值小于i(不包括i)的元素

    $(":header")  //选择所有标题元素,像h1,h2,h3...

    $(":root")  //选择文档根元素

    $("集合:not(selector)") //选择集合中的除括号内的选择器匹配之外的元素

    查看全部
  • <!DOCTYPE html >

    <html>

    <head>

      <meta charset="UTF-8">

      <title>Jq-JQ和DOM对象的互相转换</title>

      

        <!-- 只需要引入jq的库即可,1.9版本前利于兼容 -->

      <script src="http://code.jquery.com/jquery-1.11.3.js"></script>

    </head>

    <body bgcolor="pink"  >

      <div id='did' class='dcla'>

        <div>元素一</div>

        <div>元素二</div>

        <div>元素三</div>

      </div>

    </body>

    <!-- 注:写JQuery语法需要注释此条 -->

    <!-- <script src="function.js"></script> -->

    <script type="text/javascript">

    //JQ对象转换DOM对象(互相注释查看) 

      for(i=0;i<=3;i++){    //无for遍历,则$('div')即可  

            var $JQ=$('.dcla'); //声明JQ对象,用JQ方法获取元素(带$符)

              var dom=$JQ[i];   //转成DOM对象

                dom.style.color='red'; //操作DOM对象的属性

        }


    //DOM对象转换JQ对象(互相注释查看) 

    //DOM对象,只需要用$()将DOM对象包装起来,就能获得jQuery对象了

        var dom=document.getElementById('did');  //声明DOM对象

              var $JQ=$(dom);   //转成jQuery对象

              $JQ.css('color','green'); //操作JQ对象的属性

    </script> 

    </html>

    </html>

    <!-- https://blog.csdn.net/michael8512/article/details/76281431    方法URL -->


    查看全部
  • $( "parent > child" ) 
    子选择器:选择“parent”元素中的所有的直接子元素(child)。如果parent是个集合,将匹配集合的每个元素

    定义和用法

    jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素所有的descendant元素,将其封装为jQuery对象并返回。

    注意: 选择器descendant的查找范围是"ancestor元素"的后代元素,不管是"ancestor元素"的子辈元素,还是"孙子辈",以及更"后辈"的元素均可。

    如果你只想查找子辈元素,请使用子代选择器(parent > child)


    语法

    // 这里的ancestor表示具体的祖先选择器

    // 这里的descendant表示具体的后代选择器
    jQuery("ancestor descendant")


    参数

    参数描述
    ancestor一个有效的祖先选择器。
    descendant一个有效的后代选择器。

    返回值

    返回封装了在符合祖先选择器的DOM元素内查找到的符合后代选择器的DOM元素的jQuery对象。

    如果找不到与祖先选择器匹配的DOM元素,或者在符合祖先选择器的DOM元素内找不到符合后代选择器的DOM元素,则返回一个空的jQuery对象。

    符合祖先选择器的祖先DOM元素可能有多个,在一个祖先DOM元素内也可能查找到多个后代DOM元素,返回的jQuery对象中封装了符合条件的所有DOM元素。

    $("prev + next")
    相邻兄弟选择器:选择紧接在“prev”后的第一个“next”元素,如果prev是个集合,将匹配集合的每个元素.

    $("prev ~ siblings")
    一般兄弟选择器:选择“prev”之后的所有"siblings"兄弟元素。,如果prev是个集合,将匹配集合的每个元素

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

    2018-06-09

  • jQuery对象转化成DOM对象

     1,jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。

    2,我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都是可以操作的DOM元素,3,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

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

    查看全部
  • $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。

    查看全部

举报

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

微信扫码,参与3人拼团

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

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