jQuery技术

jQuery学习笔记之DOM对象和jQuery对象(2)

字号+ 作者:H5之家 来源:H5之家 2017-05-19 10:03 我要评论( )

四。内容过滤: :contains(text) 选择含有text文本的元素 如:$("div:contains('hello')")为选择含有hello字符的div元素 :empty 选择所有不含字符的元素 :has(selector) 选择含有selector元素的元素 :parent 选

四。内容过滤:

  • :contains(text) 选择含有text文本的元素 如:$("div:contains('hello')")为选择含有hello字符的div元素
  • :empty 选择所有不含字符的元素
  • :has(selector) 选择含有selector元素的元素
  • :parent 选择含有子元素的元素
  • 五。可见性过滤:

  • :hidden 选择所有可见元素
  • :visible 选择所有不可见元素
  • 六。属性过滤:

  • [attribute] 选择拥有此属性的元素 如$("div[id]")选择包含id属性的div元素
  • [attribute=value] 选择attribute属性等于value值的元素
  • [attribute!=value] 选择attribute属性不等于value值的元素
  • [attribute^=value] 选择attribute属性等于value值的元素
  • [attribute$=value] 选择attribute属性值以value值开始的元素
  • [attribute*=value] 选择attribute属性值含有value值的元素
  • [selector1][selector2]....满足这些条件的元素(组合)
  • 七。子元素过滤选择器

  • :nth-child(index/even/odd/eqation)选择父元素下的[索引/偶/奇]的子元素
  • :first-child 选择父元素的第一个子元素
  • :last-child选择父元素的最后一个子元素
  • :only-child 选择父元素下是唯一的子元素
  • 八。表单属性过滤

  • :enabled 选择所有可见元素 如:$("#form1:enabled")是选择表单id为form1的所有可以用元素
  • :disable 选择所有不可见元素
  • :checked 选择所有被选择的元素
  • :selected 选择所有被选中的选项元素
  • 九.表单对象过滤

  • :input 选择所有<input><textarea><select><button>元素
  • :text 选择所有单行文本款,下面的都是这个格式
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file
  • :hidden

  •     

    [3]jQuery学习笔记之DOM对象和jQuery对象

        来源: 互联网  发布时间: 2013-12-24

    什么是DOM对象?

    HTML是以树形结构来组织文档的,具体如下:

    代码如下:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>1-4</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 引入 jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function(){
    var domObj = document.getElementsByTagName("h3")[0]; // Dom对象
    var $jQueryObj = $(domObj); //jQuery对象
    alert("DOM对象:"+domObj.innerHTML);
    alert("jQuery对象:"+$jQueryObj.html());
    });
    </script>
    </head>
    <body>
    <h3>例子</h3>
    <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
    <ul>
    <li>苹果</li>
    <li>橘子</li>
    <li>菠萝</li>
    </ul>
    </body>
    </html>


    上面的HTML文件的DOM树如下: 什么是jQuery对象?

    jQuery对象就是经过jQuery包装过的DOM对象,如下:

    $(domObj) 相当于 document.getElementsByTagName("h3")
    $("#ID") 相当于 document.getElementsById("ID")

    jQuery对象和DOM对象的转换?

    1.获取对象:

    获取jQuery对象:var $variable=jQuery对象;
    获取DOM对象:var variable=DOM对象;
    2.jQuery对象转DOM对象:

    利用数组转换 var cr=$("#cr")[0];
    利用get(index)方法转换 var cr=$("#cr").get(0);
    3.DOM对象转jQuery对象:
    var cr=document.getElementsById("cr"); //获取DOM对象
    var $cr=$(cr);//转换为jQuery对象


        

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    •  Demo学习: Basic jQuery

      Demo学习: Basic jQuery

      2017-05-19 10:03

    • 尚硅谷Jquery视频教程(佟刚)共25讲打包下载

      尚硅谷Jquery视频教程(佟刚)共25讲打包下载

      2017-05-19 09:07

    • Js借助jquery获取IP地址

      Js借助jquery获取IP地址

      2017-05-19 08:00

    • 20个最佳jQuery的视差滚动教程

      20个最佳jQuery的视差滚动教程

      2017-05-18 18:01

    网友点评
    /