jQuery的DOM操作1

如何筛选jQuery对象

1，DOM对象和jQuery对象的区别

• DOM对象(DOM元素)是浏览器的网页页面中渲染出来的元素
• jQuery对象是对0个，1个或多个原生DOM对象的封装，是一个类数组
• jQuery对象和原生DOM对象之间可以相互转换
  $(domObject) : jQuery Object
$(xxx).get(0) : DOM Object
$(xxx)[0] : DOM Object
• 检测DOM对象还是jQuery对象的方法：obj.jquery，obj.nodeType

2，创建元素

var div = $('
hello word
');
console.log($('div'));  //在没有放到页面之前无法选中
div.appendTo('body');   //追加到body的最后面
console.log($('div'));  //在没有放到页面之后可以选中

3，设置元素属性

$(function()
{
    //方法一：声明一个空元素，然后再设置属性
    var link1 = $('',{
        text:'baidu',
        href:'http://www.baidu.com',
        target:'_blank_',
        title:'goto baidu'
    });
    link1.appendTo('body');

    //方法二：非空元素的情况，用attr实现
    var link2 = $('baidu').attr({
        // text:"baidu",
        href:'http://www.baidu.com',
        target:'_blank_',
        title:'goto baidu'
    });
    link2.appendTo('body');
})

4，检查和获取元素

//用length属性检查元素数量
var elements1 = $('li');
console.log(elements1.length);  //值为9

//提取元素：方法1
//[index]       返回DOM元素
//get([index])  返回DOM元素或元素集合
console.log(elements1[0]);      //获取item-1
console.log(elements1.get(0));  //获取item-1

// console.log(elements1[]);    //!!这样不可以，会报错!!
console.log(elements1.get());   //获取item-1~item-9 返回一个数组

console.log(elements1[-1]);     //这样不可以，返回值是undefined
console.log(elements1.get(-1)); //获取item-9

console.log(elements1[100]);    //越界，返回值是undefined
console.log(elements1.get(100));//越界，返回值是undefined

console.log(elements1.toArray());//跟get()一样

//提取元素：方法2
//eq(index)     返回jQuery对象
console.log(elements1.eq(0));   //获取item-1
console.log(elements1.eq());    //什么都不返回，跟get()不一样
console.log(elements1.eq(-1));  //获取item-9
console.log(elements1.eq(100)); //什么都不返回
console.log(elements1.first()); //获取第一个元素item-1
console.log(elements1.last());  //获取最后一个元素item-9

注意1：api官方文档
注意2：尽量使用方法而不是筛选器获取jQuery对象，因为方法的效率比较高

5，通过关系查找jQuery对象

• 通过父子关系查找

//children([selector])  直接子元素 不返回文本节点
console.log($('#box3').children());

//contents([selector])  直接子元素 返回文本节点(包括换行)
console.log($('#box3').contents());

//children([selector])  直接子元素(selector) 不返回文本节点
console.log($('#box3').children('ul'));

//contents([selector])  直接子元素(selector),返回文本节点(不包括换行)
console.log($('#box3').contents('ul'));

//find(selector)        后代元素 包括子元素和孙子元素
console.log($('#box3').find('.item3')); //注意：.item3

//parent([selector])    直接父元素
console.log($('#info').parent());

//parents([selector])   祖先元素 包括父元素和祖父元素等
console.log($('#info').parents());

//parent([selector])    直接父元素(selector)
console.log($('.item3').parent('div'));     //直接父元素如果是div，能找到，否则找不到

//parents([selector])   祖先元素(selector) 包括父元素和祖先元素
console.log($('.item3').parents('div'));    //找到所有div元素

//parentsUntil([selector]) 到selector为止(不包含selector)，不包括selector
console.log($('#info').parentsUntil('#box2'));

//closest(selector) 从当前元素开始向上逐级查找，并返回最先匹配的元素
console.log($('#info').closest('#box2'));

// closest与parents的区别：
// closest是从当前元素开始匹配的，parents是从父元素开始匹配的
// closest向上找，找到匹配的就停止，parents会找到所有的父元素，并返回一个集合
// closest返回1个或0个，parents能返回多个

• 通过兄弟姐妹关系查找

//next([selector])      当前元素之后紧邻的同辈元素
console.log($('.item4').next('li'));

//nextAll([selector])   当前元素之后所有的同辈元素
console.log($('.item4').nextAll('li'));

//nextUntil([selector]) 当前元素之后所有的同辈元素 selector为止(不包括selector)
//如果不写selector，那么效果和.nextAll()一致
console.log($('.item4').nextUntil('.item7'));

//prev([selector])      当前元素之前紧邻的同辈元素
console.log($('.item4').prev('li'));

//prevAll([selector])   当前元素之前所有的同辈元素
console.log($('.item4').prevAll('li'));

//prevUntil([selector]) 当前元素之前所有的同辈元素 selector为止
console.log($('.item4').prevUntil());

//siblings([selector])  next + prev
console.log($('.item6').siblings('li'));

6，筛选和遍历jQuery对象

• 添加/过滤元素

//add(selector)     增加元素
console.log($('.item1,.item2,.item3'));
console.log($('.item1').add('.item2').add('.item3'));

//not(selector)     过滤元素 方法一
console.log($('li').not('.item4'));

//filter(selector)  过滤元素 方法二
//与not相反
console.log($('li').filter('.item4'));

    //使用函数
    console.log($('li').not(function(index)
    {
        return $(this).hasClass('item4');
    }));
    console.log($('li').filter(function(index)
    {
        return $(this).hasClass('item4');
    }));

//has(selector)     过滤元素 方法三
//筛选包含特定对象的元素
console.log($('li').has('ul'));

• 获取子集，转换元素

//slice(start[,end])    获取子集
console.log($('li').slice(3,5));    //左闭右开 NO.3 NO.4
console.log($('li').slice(-2));     //左闭右开 NO.8 NO.9

//map(callback)         转化元素
//将一个jQuery对象装换为另一个jQuery对象
console.log();
console.log($('div').map(function(index,domElement)
{
    return this.id;
    // return null;         返回值不会加入到集合中
    // return undefined;    返回值不会加入到集合中
    //return domElement.id; 和this.id是一样的效果
}));

• 遍历元素

//each(iterator)    遍历元素
console.log($('div').each(function(index,domElement)
{
    if(this.id === 'box2')
    {
        // return true; //相当于continue
        return false;   //相当于break
    }
    this.title = this.id;   //this.innerText和this.innerHTML一样
}))

7，其他操作

//is(selector)  存在元素，返回ture，反之返回false
console.log($('#box3').children().is('p'));
console.log($('#box3').children().is('img'));

//end()         将匹配元素集还原到之前的操作状态
//end方法之前必须是以一个破坏性操作，否则会返回一个空对象
//破坏性操作：map(),children(),not(),filter(),next(),find(),parent()
console.log(
    $('#box3').find('.item4').css('color','red')    //这个操作之后jQuery对象已经点位在item4上了
    .end().find('.item6').css('color','blue')       //所以，必须先执行end()，把对象重新定位到box3上
);

//addBack([selector])   在进行破坏性操作之后，把原来的元素也包含进来
//.item7，.item8都会设置颜色样式
console.log($('.item7').nextUntil('.item9').addBack().css('color','orange'));

对jQuery对象的属性，特性，以及数据的操作

1，特性和属性的区别

//特性：attribute:值为string，要已经写在标签内的内容，否则取出来就是未定义
//属性：properties:值为string,boolean,number,object

var checkbox = document.getElementById('check');

console.log(checkbox.getAttribute('tabindex')); //获取特性
console.log(checkbox.tabIndex);                 //获取属性(驼峰形式)

console.log(checkbox.getAttribute('style'));    //获取特性
console.log(checkbox.style);                    //获取属性

console.log(checkbox.getAttribute('checked'));  //获取特性
console.log(checkbox.checked);                  //获取属性 checked，selected等布尔类型的属性要用获得属性的方法!!

// 特性与属性的区别：
//1. 如果attribute是本来在DOM对象中就存在的，attribute和properties的值就会同步；
//2. 如果attribute是本来在DOM对象中就存在，但是类型为Boolean，那么attribute和properties的值就不会同步；
    //比如checkbox的checked属性
//3. 如果attribute不是DOM对象内建的属性(比如是自己瞎写的)，attribute和properties的值不会同步；
//4. 特性不区分大小写，属性区分大小写

//特例1：虽然会同步，但是值不一样
//img的src属性:绝对地址
//img的src特性:相对地址

//特列2：虽然会同步，属性名和特性名不一样
//属性名：className             由于class是js的保留字，无法直接用于属性
//特性名：getAttribute('class')

知识点：一般情况下，操作特性就可以了，只是在某些特定情况下，需要操作属性(比如checked,selected等布尔类型的属性)

2，获取，设置，删除特性

//！！特性不区分大小写！！
var img = $('img');

console.log(img.attr('title'));         //获取第一个元素的特性
console.log(img.attr('title','123'));   //设置所有元素的特性  ！！这里需要注意，并不是第一个，而是所有img元素

//同时操作复数个特性
img.attr(
{
    title:'new title',
    alt:'new alt',
    tabindex:2  //会自动转换为字符串
});

//使用操作特性
// previousValue:更改前的特性值
img.attr('title',function(index,previousValue)
{
    console.log(previousValue);
    return previousValue + 'new';
});

// removeAttr(name)删除特性
img.removeAttr('title');        // 删除title特性
img.removeAttr('alt tabindex'); // 删除alt，tabindex特性

3，获取，设置，删除属性

//!!属性区分大小写!!
var img = $('img'),
    checkbox = $('#check');

//获取属性
console.log(checkbox.prop('checked'));  //返回值false
console.log(checkbox.prop('Checked'));  //返回值undefined,因为属性区分大小写
console.log(checkbox.checked);          //返回值undefined,因为checkbox是一个jQuery对象
console.log(checkbox.get(0).checked);   //返回值false，因为把jQuery对象转换成了DOM对象
console.log(checkbox.attr('checked'));  //返回值undefined,因为特性不存在

console.log(img.prop('class'));         //返回值img-jQuery,可以直接获取classname
console.log(img.prop('className'));     //返回值img-jQuery,跟上面是一样的

console.log(checkbox.prop('tabindex')); //返回值1
console.log(checkbox.get(0).tabindex);  //返回值undefined,因为在DOM里面一定要用驼峰形式获取
console.log(checkbox.get(0).tabIndex);  //返回值1

//改变属性
console.log(checkbox.prop('tabindex',2));   //改变tabindex的值为2

//！！建议用prop来更改是否被选中，因为attr会改变HTML的结构！！
console.log(checkbox.prop('checked',true)); //改变checked的值为true

//删除属性 一次只能删除一个属性
checkbox.removeProp('title');   //title的值变为undefined，这是为了防止直接删除内置属性的话，浏览器报错

4，在元素中存取数据

• 获取数据

var img = $('img'),
    checkbox = $('#check');

//获取数据
console.log(img.data('data1'));  // img标签中有data-data1特性，这种形式可以获取到它的值

console.log(checkbox.data('description'));  //返回值undefined,因为还没有对这个属性的数据设置过任何值
checkbox.data('description','some desc');   //设置值为some desc
console.log(checkbox.data('description'));  //返回值some desc,因为已经对这个属性的数据设置了值为some desc

checkbox.data('lastdesc','some desc');
console.log(checkbox.data('lastdesc'));     //返回值为some desc
console.log(checkbox.data('lastDesc'));     //返回值为undefined
console.log(checkbox.data('last-desc'));    //返回值为undefined

checkbox.data('firstDesc','some desc');
console.log(checkbox.data('firstdesc'));    //返回值为undefined
console.log(checkbox.data('firstDesc'));    //返回值为some desc
console.log(checkbox.data('first-desc'));   //返回值为some desc

checkbox.data('mid-desc','some desc');
console.log(checkbox.data('middesc'));      //返回值为undefined
console.log(checkbox.data('midDesc'));      //返回值为some desc
console.log(checkbox.data('mid-desc'));     //返回值为some desc

checkbox.data('Cen-desc','some desc');
console.log(checkbox.data('cendesc'));      //返回值为undefined
console.log(checkbox.data('cenDesc'));      //返回值为undefined
console.log(checkbox.data('CenDesc'));      //返回值为some desc 首字母要一样
console.log(checkbox.data('cen-desc'));     //返回值为undefined
console.log(checkbox.data('Cen-desc'));     //返回值为some desc 首字母要一样

//总结1：如果用驼峰或者“-”形式来命名数据，那么获取数据时驼峰和“-”形式都可以用
//总结2：如果不用驼峰或者“-”形式来命名数据，那么获取数据时一定要和命名的名字一样才行

• 修改数据

var img = $('img');

//更改数据 单个操作
img.data('data1','new data1');

//更改数据 多个操作
img.data({
    data3:'new data3',
    data4:'new data4',
    data5:'new data5'
});

• 删除数据

var img = $('img');

img.data({
    data3:'new data3',
    data4:'new data4',
    data5:'new data5'
});

//删除数据
// img.removeData('data1');     //这种情况是删除不掉的，因为在HTML标签内本来就存在data1
// console.log(img.data());

// img.removeData('data3 data4');       //删除方法1 空格
// console.log(img.data());

// img.removeData(['data3','data4']);   //删除方法2 数组
// console.log(img.data());

img.removeData();                       //删除方法3 删除全部

• 判断数据是否存在

var img = $('img');

img.data({
    data3:'new data3',
    data4:'new data4',
    data5:'new data5'
});

//！！注意：如果上面这一段代码被删除的话，那下面的值都是false
//因为hasData方法的判断不包括HTML标签里的data

//判断是否有数据 jQuery.hasData(element)  注意这里是DOM元素
console.log($.hasData(img));        //返回值false  jQuery元素
console.log($.hasData(img.get(0))); //返回值true   DOM元素