jquery 字符串转dom对象及对该指标使用选取器查询,jquerydom

<script>
    $(document).ready(function () {
        var htmlStr = '<div id="outerDiv"><div class="class1"><a>aa</a></div><div class="class1">bb</div><div>cc</div></div>'
        var htmlObj = $(htmlStr); //将字符串转为jquery的dom对象
        console.log(htmlObj.html());

        var filterObj = htmlObj.find(".class1"); //对转换后的对象进行查询
        console.log(filterObj);
        alert($(filterObj[0]).html()); //<a>aa</a>
        alert($(filterObj[1]).html()); //bb
    }); 
</script>

 

初稿地址: 

字符串转dom对象及对该指标使用采取器查询,jquerydom script
$(document).ready( function () { var htmlStr = ‘div id=”outerDiv”div
class=”class1″aaa/a/divdiv…

依赖jQuery对象和DOM对象和字符串之间的转载实例,jquerydom

1、字符串———->jQuery对象

$(HTML字符串): $(‘<div>小编是祖国的一朵小花</div>’)

待增加列表

2、jQuery对象———->DOM对象

下标选拔法(原理:jQuery是DOM的数组情势):$(“h2”)[1]

使用.get(index)函数

3、字符串———–>DOM对象

写贰个剧本函数

function parseDom(nodelist) { //nodelist是html文本字符串
 var objE = document.createElement("div"); 
 objE.innerHTML = nodelist;
 return objE.childNodes;
}

先把’字符串’—>jQuery—->DOM对象

4、DOM对象———>字符串

使用jQuery中函数.html()

$(选择器).html();//把您想要转化成字符串的dom对象使用选取器采抽出来,然后使用html()函数就完了了

如上这篇基于jQuery对象和DOM对象和字符串之间的转速实例便是我分享给大家的全体内容了,希望能给大家三个参阅,也可望大家多多匡助帮客之家。

1、字符串———-jQuery对象 $(HTML字符串):
$(‘div小编是祖国的一朵小花/div’) 待增多列…

1.dom目的的innerText和innerHTML有哪些差别?

  • innerText:得到dom对象(成分)内部的文件内容,要是dom对象内部嵌套多层成分,则会依照由浅到深的一一,将各因素内的文本连接起来
  • innerHTML:得到dom对象(元素)内部的HTML结构

一、源码思路分析计算

[ 作者:华子yjh
]

概要:

jQuery的宗旨理想能够省略总结为“查询和操作dom”,今天任重(Ren Zhong)而道远是深入分析一下jQuery.prototype.init采取器构造函数,管理采取器函数中的参数;

以此函数的参数便是jQuery()===$()实施函数中的参数,能够先看本人前面写的浅析jQuery基础框架一文,掌握基础框架后,再看此文。

思路深入分析:

以下是三种jQuery的运用状态(用于查询dom),每一种情景都回来多少个选取器实例(习于旧贯称jQuery对象(贰个nodeList对象),该指标涵盖查询的dom节点):

1、处理 $(“”), $(null), $(undefined),
$(false)

只要参数为上述违法值,jQuery对象不分包dom节点

2、处理 $(DOMElement)

设若参数为节点成分,jQuery对象涵盖该参数节点成分,并分别增添属性值为参数节点成分、1的context、length属性和用[]寻访jQuery对象中dom节点的用法

例2.1:

1 var obj = document.getElementById('container'),
2 jq = $(obj);
3 
4 console.log(jq.length); //1
5 console.log(jq.context); //obj
6 console.log(jq.[0]); //obj

3、处理$(HTML字符串)

比如第三个参数为HTML字符串,jQuery对象涵盖由jQuery.clean函数创制的fragment文书档案碎片中的childnodes节点

例3.1:

1 var jqHTML = $('<h1>文章标题</h1><p>内容</p>');
2 console.log(jqHTML); //[<h1>,<p>];

若果第一个参数(HTML字符串)为一个空的单标签,且第贰个参数context为二个非空纯对象

例3.2:

1 var jqHTML = $('<div></div>', { class: 'css-class', data-name: 'data-val' });
2 
3 console.log(jqHTML.attr['class']); //css-class
4 console.log(jqHTML.attr['data-name']); //data-val

4、处理$(#id)

假如第贰个参数是三个#台币素id,jQuery对象涵盖独一全数该id的因秋日点,
并各自增添属性值为document、参数字符串、1、的context、selector、length属性和用[]访谈jQuery对象中dom节点的用法

例4.1:

1 var jq = $('#container');
2 
3 console.log(jq.[0]); //包含的dom节点元素
4 console.log(jq.length); //1
5 console.log(jq.context); //document
6 console.log(jq.selector); //container

5、处理$(.className)

一经第三个参数是一个.className,jQuery对象中有所class名称叫className的竹签成分,并追加三个属性值为参数字符串、document的selector、context属性

其实奉行代码为:

1 return jQuery(document).find(className);

6、处理$(.className, context)

如果第二个参数是.className,第四个参数是一个上下文对象(能够是.className(等同于管理$(.className
.className)),jQuery对象或dom节点),
jQuery对象涵盖第叁个参数上下文对象中持有class名字为className的子孙节点成分,并扩张三个context和selector属性

实际上实施代码为:

1 return jQuery(context).find(className);

例6.1:

html代码:

1 <div class="main">
2 <h2 class="title">主内容标题</h2>
3 <p>主标题</p>
4 </div>
5 
6 <div class="sub">
7 <h2 class="title">次内容标题</h2>
8 <p>次标题</p>
9 </div>

JavaScript代码:

 1 var jq, context;
 2 
 3 context = '.sub';
 4 var jq = $('.title', context);
 5 console.log(jq.text()); //次内容标题
 6 console.log(jq.context); //document
 7 console.log(jq.selector); //.sub .title
 8 
 9 context = $('.sub');
10 var jq = $('.title', context);
11 console.log(jq.text()); //次内容标题
12 console.log(jq.context); //document
13 console.log(jq.selector); //.sub .title
14 
15 context = $('.sub')[0];
16 var jq = $('.title', context);
17 console.log(jq.text()); //次内容标题
18 console.log(jq.context); //className为sub的节点元素
19 console.log(jq.selector); //.title

金沙糖果派对网站app,7、处理$(fn)

假设第三个参数是fn函数,则调用$(document).ready(fn);

例7.1:

1 $(function(e){
2     console.log('DOMContent is loaded');
3 })
4 //上面代码等同于:
5 jQuery(document).ready(function(e) {
6     console.log('DOMContent is loaded');
7 });

 

8、处理$(jQuery对象)

假若第一个参数是jQuery对象,上边已经解析过借使在询问dom时,参数是一个#比索素id,重临的jQuery对象会大增二个属性值为参数字符串、document的selector、context属性

例8.1:

1 var jq = $('#container');
2 console.log(jq.selector); // #container
3 console.log(jq.context); // document

那么当现身$($(‘#container’))该怎样处理啊?同样的,重返的jQuery对象同情状5和6拍卖的意况同样

例8.2:

1 var jq2 = $($('#container'));
2 console.log(jq2.selector); // #container
3 console.log(jq2.context); // document

 

2.elem.children和elem.childNodes的区别?

<!DOCTYPE HTML>
<html>
<head>
  <title>test dom</title>
</head>
<body>
  <div id="test">
    <h1>aaaaaa</h1>
    aaaaaa
    <a href="www.baidu.com">baidu</a>
    <p class="testclass">bbbbbb</p>
  </div>
</body>
</html>
  • elem.children:重回子HTML成分列表(不富含elem内部的文本节点),是HTMLCollection类型的靶子
![](https://upload-images.jianshu.io/upload_images/3685006-a6689ece3b052f9c.png)
  • elem.childNodes:再次回到子成分列表(包含elem内部的文本节点),是NodeList类型的靶子
![](https://upload-images.jianshu.io/upload_images/3685006-6c31d649a2dda852.png)

-   其中第2个文本节点的内容为: `换行 aaaaaa 换行`
  • HTMLCollection和NodeList:
    • 相似:
      • 都以类数组对象,都有length属性,可以经过for循环迭代
      • 都以只读的
      • 都以实时的,即文书档案的改观会应声反映到有关对象方面(有三个不如,document.querySelectorAll重回的NodeList不是实时的)
      • 都有item()方法,能够由此item(index)获取成分
    • 区别:
      • HTMLCollection对象具有namedItem()方法(根据 Id
        再次来到钦定节点,恐怕当做备用,依照字符串所代表的 name
        属性来同盟。依据 name
        相称只可以当作最终的重视性,何况独有当被引述的成分援救 name
        属性时能力被相称。)
      • HTMLCollection通过品质获取成分得以帮衬id和name,而NodeList对象只援救id

var elem1, elem2;

// 假定在文档中有一个 <form> 元素,且它的 id 是 "myForm":document.forms 是一个 HTMLCollection

elem1 = document.forms[0];
elem2 = document.forms.item(0);

alert(elem1 === elem2); // 显示 "true"

elem1 = document.forms["myForm"];
elem2 = document.forms.namedItem("myForm");

alert(elem1 === elem2); // 显示 "true"

而NodeList只支持id

var divs = document.getElementsByTagName( 'div' );
var firstDiv = divs[ 0 ];

二、源码注释剖析

[ 基于jQuery1.8.3 ]

  1 var rootjQuery = $(document),
  2     rquickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/;    
  3 
  4 jQuery.fn = jQuery.prototype = {
  5     init: function( selector, context, rootjQuery ) {
  6         var match, elem, ret, doc;
  7 
  8         // Handle $(""), $(null), $(undefined), $(false)
  9         if ( !selector ) {
 10             return this;
 11         }
 12 
 13         // Handle $(DOMElement)
 14         if ( selector.nodeType ) {
 15             this.context = this[0] = selector;
 16             this.length = 1;
 17             return this;
 18         }
 19 
 20         // Handle HTML strings
 21         if ( typeof selector === "string" ) {
 22             if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
 23                 // Assume that strings that start and end with <> are HTML and skip the regex check
 24                 match = [ null, selector, null ];
 25 
 26             } else {
 27                 match = rquickExpr.exec( selector );
 28             }
 29 
 30             // Match html or make sure no context is specified for #id
 31             // match[1]不为null,则为html字符串,match[2]不为null,则为元素id
 32             if ( match && (match[1] || !context) ) {
 33 
 34                 // HANDLE: $(html) -> $(array)
 35                 if ( match[1] ) {
 36                     context = context instanceof jQuery ? context[0] : context;
 37                     doc = ( context && context.nodeType ? context.ownerDocument || context : document );
 38 
 39                     // scripts is true for back-compat
 40                     // selector是由文档碎片中的childnodes组成的数组
 41                     selector = jQuery.parseHTML( match[1], doc, true );
 42                     
 43                     // 如果match[1]为空的单标签元素(如:<div><div>)且context为对象字面量
 44                     if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
 45                         
 46                         // 如果context对象不为空,则将对象中的属性添加到selector数组中仅有的dom节点中
 47                         this.attr.call( selector, context, true );
 48                     }
 49                     
 50                     // merge函数的参数应该为两个数组,目的是将第二个数组中的项合并到第一个数组,而this并不是一个数组,
 51                     // this是选择器init构造函数的实例对象,该对象继承jQuery.prototype对象中的length属性(默认为0),因此可以理解好merge函数源码
 52                     // 将selector中的dom项合并到this对象中,并返回该对象
 53                     return jQuery.merge( this, selector );
 54 
 55                 // HANDLE: $(#id)
 56                 } else {
 57                     elem = document.getElementById( match[2] );
 58 
 59                     // Check parentNode to catch when Blackberry 4.6 returns
 60                     // nodes that are no longer in the document #6963
 61                     if ( elem && elem.parentNode ) {
 62                         // Handle the case where IE and Opera return items
 63                         // by name instead of ID
 64                         // ie6,7和Opera存在此bug,当一个标签name和一个标签id值相等时,
 65                         // document.getElementById(#id)函数将返回提前出现的标签元素
 66                         if ( elem.id !== match[2] ) {
 67                             // 如果存在以上Bug,则返回由find函数返回的document文档的后代元素集合
 68                             return rootjQuery.find( selector );
 69                         }
 70 
 71                         // Otherwise, we inject the element directly into the jQuery object
 72                         this.length = 1;
 73                         this[0] = elem;
 74                     }
 75 
 76                     this.context = document;
 77                     this.selector = selector;
 78                     return this;
 79                 }
 80 
 81             // HANDLE: $(expr, $(...))
 82             // context不存在或者context为jQuery对象
 83             } else if ( !context || context.jquery ) {
 84                 return ( context || rootjQuery ).find( selector );
 85 
 86             // HANDLE: $(expr, context)
 87             // (which is just equivalent to: $(context).find(expr)
 88             // context为className或者dom节点元素
 89             } else {
 90                  // 等同于jQuery(context).find(selector)
 91                 return this.constructor( context ).find( selector );
 92             }
 93 
 94         // 处理$(fn)===$(document).ready(fn)
 95         } else if ( jQuery.isFunction( selector ) ) {
 96             return rootjQuery.ready( selector );
 97         }
 98         
 99         // 处理$(jQuery对象)
100         if ( selector.selector !== undefined ) {
101             this.selector = selector.selector;
102             this.context = selector.context;
103         }
104 
105         // 当第一个参数selector为jQuery对象时,将selector中的dom节点合并到this对象中,并返回this对象
106         return jQuery.makeArray( selector, this );
107     }
108 }

 

转发请注脚出处【笔者:华子yjh,原版的书文链接】

 

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注