zoukankan      html  css  js  c++  java
  • jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8 </head>
     9 <body>
    10     <h3>例子</h3>
    11     <p title="你最喜欢吃的水果">你最喜欢吃的水果?</p>
    12     <ul>
    13         <li class="attive">梨子</li>
    14         <li>苹果</li>
    15         <li>草莓</li>
    16         <li>香蕉</li>
    17     </ul>
    18 </body>
    19 </html>

    运行结果和DOM结构如下:

                       

    在这棵DOM树中,h3,p,ul 以及ul下的4个li 子节点,都是DOM的元素节点,可以通过js中的getElementsByTagName或者getElementById来获取元素节点,像这样得到的DOm元素就是DOM对象;dom对象js获取实例:

    var domObj = document.getElementById('Id');                                // 获取DOM对象

    var ObjHTML = domObj.innerHTML;                                               // 使用JS中的属性----innerHTML;

    2. jquery 对象

    jquery 对象就是通过jQuery 包装DOM对象后产生的对象。

    jquery对象是jQuery 独有。如果一个对象是jquery对象,就可以使用jquery里的方法;例如:

    $("#name1").html();            // 获取ID为name 的元素里的 html代码;

    等同于js里的:document.getElementById("name").innerHTML;

    备注:jquery 对象不能使用DOM对象的任何方法;DOM对象也不能使用jquery里的方法。

    3. jquery对象与DOM对象的转换:

    3.1 jquery 对象转换为DOM对象:通过[index]和get(index);

    3.1.1 jquery 代码:

    var $cr = $("#cr");                   // 获取jquery对象 $cr

    var  cr  = $cr[0] ;                     // 转化为DOM对象 cr

    alert( cr.checked );                // 弹出cr对象的checked 属性值

    3.1.2 jquery 代码:

    var $cr = $("#cr");                   // 获取jquery对象 $cr

    var  cr  = $cr.get(0) ;                     // 转化为DOM对象 cr

    alert( cr.checked );                // 弹出cr对象的checked 属性值

    3.2  DOM对象转化为jquery对象:用 $() 把DOM对象包裹起来,就可以了 

    3.1.2 jquery 代码:

    var cr = document.getElementById("id_name") ;                   // 获取Id名字为id_name的DOM对象;

    var  $cr  = $( cr ) ;                     // 将DOM对象转化为jquery 对象

    alert( $cr.attr("checked") );                // 弹出jquery对象$cr的checked 属性值

    http://www.cnblogs.com/huanying2015 博客随笔大多数文章均属原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利
  • 相关阅读:
    【leetcode】1215.Stepping Numbers
    【leetcode】1214.Two Sum BSTs
    【leetcode】1213.Intersection of Three Sorted Arrays
    【leetcode】1210. Minimum Moves to Reach Target with Rotations
    【leetcode】1209. Remove All Adjacent Duplicates in String II
    【leetcode】1208. Get Equal Substrings Within Budget
    【leetcode】1207. Unique Number of Occurrences
    【leetcode】689. Maximum Sum of 3 Non-Overlapping Subarrays
    【leetcode】LCP 3. Programmable Robot
    【leetcode】LCP 1. Guess Numbers
  • 原文地址:https://www.cnblogs.com/huanying2015/p/8185794.html
Copyright © 2011-2022 走看看