jQueryDom的操作(1)

第一章 如何筛选jQuery对象

操作jQuery对象，如何创建HTML

DOM对象和jQuery对象

• 区别
• 检测DOM Object : if (obj.nodeType)
• 检测jQuery Object : if(obj.jquery)
• 转换：　
  var jqueryObj = $(domObj);
  var domObj = jqueryObj.get([index]);

$(function () {
     var DOMObject = document.getElementById("div");
     var jqueryObject=$("#div");
     console.log(DOMObject);
     console.log(jqueryObject);
     console.log(DOMObject.nodeType);//->1
     console.log(jqueryObject.jquery);//->版本号
     console.log($(DOMObject));  //dom转换成jQuery对象
     console.log(jqueryObject.get(0));//jQuery对象转换成dom对象
 })
$(function () {
var div = $("
hello
");
console.log(div);//打印jQuery对象
div.appendTo('body');//appendTo()追加到body最后面，放到页面上
console.log($("div"));//在内存中而不在页面上 选择器是选择不到的 必须得执行上一步先放到页面上 才能选出来(length为0就是没有选到)
})

如何创建元素

• $('
  Hello
  ');
• 设置属性

$(function () {
        //第一种方法
        var link1 = $('', {    //这里的a必须是空元素 加上别的东西例如123是无效的
            text: 'baidu',
            href: 'http://www.baidu.com',
            target: '_blank',
            title: 'goto baidu'
        })
        link1.appendTo('body');

        //第二种方法
        var link2 = $('baidu').attr({
            href: 'http://www.baidu.com',
            target: '_blank',
            title: 'goto baidu'
        });
        link2.appendTo('body');
    })

检查和提取元素

    
    



    
item-1
    
item-2
    
item-3

• $('xxx').length 检查元素数量

提取元素

• [index]返回dom元素
• get([index])返回dom元素或元素集合
• eq(index)返回jQuery对象
• first()
• last()
• toArray()

通过关系查找jQuery对象的方法

• children([selector])
• contents()
  这两个 直接子元素，可以加参数
• find(selector)
  包含子元素和孙子元素
• parent([selector])
  获得当前匹配元素集合中每个元素的父元素
• parents([selector])
  获得当前匹配元素集合中每个元素的所有父元素
• parentsUntil([selector])
  获得当前匹配元素集合中每个元素的祖先元素，直到遇到被选择器(该方法的参数)匹配的元素为止
• closest(selector)
  从当前元素开始逐级向上寻找，返回最先匹配的元素，也能获取到本身

closest与parents的区别:
1.closest是从当前元素开始匹配的,parents是从父元素开始匹配的。
2.closest向上找，找到匹配的就停止；parents会找到所有的父元素，并返回一个集合。

• next([selector]) nextAll([selector]) nextUntil([selector]) 向后查找兄弟元素
• prev([selector]) prevAll([selector]) prevUntil([selector]) 向前查找兄弟元素
• siblings([selector]) 取出所有兄弟姐妹元素

筛选和遍历jQuery对象

• 添加元素
  .add(selector)
  $('.item1, .item2')相当于$('.item1').add('.item2')
• 过滤元素
  .not(selector) 删除
  .filter(selector)
  .has(selector)
• 获取子集
  .slice(start[,end])
  一个左闭右开的区间，如果 .slice(3, 5) 就是包括3 取不到5 也就是 3和4
• 转换元素
  .map(callback)
• 遍历元素
  .each(iterator)

jQuery对象的其他操作

• is(selector)
  is()方法根据选择器、元素或jQuery对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回true。
• end()
  end()方法将匹配元素集还原到之前的操作状态。

• 破坏性操作：任何对jQuery对象进行改变的操作
  使用end方法时，前一次的操作一定要是破坏性操作，不然返回的是一个空对象

• addBack([selector])
  进行破坏性操作，又想把原来的元素包含进来,就用这个方法。