jQuery系列---【jQuery操作元素】

jQuery节点

• children()：直接子元素
• next(): 下一个兄弟节点
• nextAll(): 下面所有的兄弟节点
• prev()：上一个兄弟节点
• prevAll()：上面所有兄弟节点
• siblings(): 所有的兄弟节点
• parent(): 父节点
• parents(): 所有的祖先节点
• find(): 查找后代节点
• filter(): 过滤
• not(): 排除

// jQuery节点关系
// children()：直接子元素
// console.log($('div').children());
// $('div').children().css('background', 'red'); // div的直接子元素 ul和p
// console.log($('div').children('p'));
// $('div').children('p').css('background', 'red');

// next(): 下一个兄弟节点
// $('#li3').next().css('background', 'red');
// nextAll(): 下面所有的兄弟节点
// $('#li3').nextAll().css('background', 'red');
// prev()：上一个兄弟节点
// $('#li3').prev().css('background', 'red');
// prevAll()：上面所有兄弟节点
// $('#li3').prevAll().css('background', 'red');

// siblings(): 所有的兄弟节点
// $('#li3').siblings().css('background', 'red');
// $('#li3').css('background', 'red').siblings().css('background', 'blue');
// var index = 3;
// $('li').eq(index).css('background', 'red').siblings().css('background', 'blue');

// parent(): 父节点
// parents(): 所有的祖先节点
console.log($('#li3').parent());
console.log($('#li3').parents());
// $('#li3').parent().css('background', 'red');
// $('#li3').parents().css('background', 'red');
$('#li3').parents('div').css('background', 'red');

console.log($('div').children()); // 直接子元素
console.log($('div').find('li')); // n.fn.init(5) 在div的所有后代元素中找li
console.log($('div').find('*')); // n.fn.init(8) div的所有后代元素
$('li').filter('.content').css('background', 'red'); // filter(): 过滤
$('li').not('#li3').css('background', 'blue'); // not(): 排除

jQuery操作属性

// jQuery对象.attr(属性名)：获取属性值
// jQuery对象.attr(属性名, 属性值)：设置属性值 / jQuery对象.attr(json)
// jQuery对象.removeAttr(属性名)：移除属性
console.log($('div').attr('id'));
console.log($('div').attr('class'));
console.log($('div').attr('title'));

$('div').attr('id', 'idhaha');
$('div').attr('class', 'classhaha');
$('div').attr('title', 'titlehaha');

$('div').attr({
    "id": "idxixi",
    "class": "classxixi",
    "title": "titlexixi"
});

$('div').removeAttr('title');

// 1.只添加属性名就可以生效，应该使用prop
// 2.属性值只有true、false时，应该使用prop
// input的checked属性使用prop，其余使用attr
// console.log($(':checkbox').attr('checked')); // undefined
// console.log($(':checkbox').prop('checked')); // false
// $(':checkbox').attr('checked', 'checked');

jQuery操作class

• addClass(): 添加类名
• removeClass(): 移除类名
• hasClass()：是否有该类名
• toggleClass(): 切换类名，有就移除，没有就添加

// addClass(): 添加类名
$('div').addClass('red');

// removeClass(): 移除类名
$('div').removeClass('red');

// hasClass()：是否有该类名
console.log($('div').hasClass('box')); // true
console.log($('div').hasClass('red')); // false

// toggleClass(): 切换类名，有就移除，没有就添加
$('div').toggleClass('red');

jQuery操作样式

• jQuery对象.css(样式名): 获取样式值
• jQuery对象.css(样式名,样式值)：设置样式 jQuery对象.css(json)

// jQuery对象.css(样式名): 获取样式值
// jQuery对象.css(样式名,样式值)：设置样式  jQuery对象.css(json)
console.log($('div').css('width'));
console.log($('div').css('height'));
console.log($('div').css('background-color')); // rgb(255, 165, 0)
console.log($('div').css('backgroundColor')); // rgb(255, 165, 0)

$('div').css('width', '300px');
$('div').css('height', 300);
$('div').css('height', '500');

$('div').css({
     500,
    height: 500,
    'background-color': 'blue',
    fontSize: 50
});

jQuery操作内容

• jQuery对象.html()、jQuery对象.text()；获取内容
• jQuery对象.html(内容)、jQuery对象.text(内容)；设置内容
• jQuery对象.html()可以识别标签，jQuery对象.text()不识别标签
• jQuery对象(表单元素).val(): 获取表单元素内容
• jQuery对象(表单元素).val(值): 设置表单元素内容

// jQuery对象.html()、jQuery对象.text()；获取内容
// jQuery对象.html(内容)、jQuery对象.text(内容)；设置内容
// jQuery对象.html()可以识别标签，jQuery对象.text()不识别标签
console.log($('div').html());
console.log($('div').text());
$('div').html('<em>em倾斜显示</em>');
$('div').text('<em>em倾斜显示</em>');

// jQuery对象(表单元素).val(): 获取表单元素内容
// jQuery对象(表单元素).val(值): 设置表单元素内容
console.log($('input').val());
$('input').val('呵呵呵呵');

$.each()

• $.each()可以遍历数组和对象

// $.each()可以遍历数组和对象.
// $.each(arr, function (index, item) {})
// var arr = [6, 7, 8, 9, 1, 2, 3];
// $.each(arr, function (index, item) {
//     console.log(index, item);
// });

$('li').each(function (index) {
    console.log(index);
    // console.log(this); // 表示每次遍历到的元素(原生对象)
    console.log($(this)); // 表示每次遍历到的元素(jQuery对象)
});
// console.log($('li'));
// $.each($('li'), function (index, item) {
//     console.log(index, item);
// });

$.map()

• $.map()可以遍历数组和对象，把结果返回，得到数组。

// $.map()可以遍历数组和对象，把结果返回，得到数组。
// $.map(arr, function (item, index) {})
var arr = [6, 7, 8, 9, 1, 2, 3];
var s = $.map(arr, function (item, index) {
    console.log(index, item);
    // return 1; // [1, 1, 1, 1, 1, 1, 1]
    // return item > 6; // [false, true, true, true, false, false, false]
    if (item > 6) return item; // [7, 8, 9]
});
console.log(arr, s);

$.extend()

• $.extend(target, src1, src2,...): 把src1，src2合并到target对象
• 在$.extend()中第一个参数为true表示深拷贝

// $.extend(target, src1, src2,...): 把src1，src2合并到target对象 
// var obj1 = {
//     name: 'lilei'
// }
// var obj2 = {
//     age: 20
// }
// var obj3 = {
//     gender: 'male'
// }
// // 把obj2，obj3合并到了obj1上，直接修改了obj1对象，obj2和obj3没有影响
// // var s = $.extend(obj1, obj2, obj3);
// // console.log(obj1, obj2, obj3, s); // {name: "lilei", age: 20, gender: "male"} {age: 20} {gender: "male"} {name: "lilei", age: 20, gender: "male"} 

// var target = {};
// // 把obj1，obj2，obj3合并到target上，obj1，obj2，obj3没有影响
// $.extend(target, obj1, obj2, obj3);
// console.log(target, obj1, obj2, obj3);


var obj = {
    name: 'lilei',
    age: 20,
    gf: {
        name: 'hanmeimei',
        age: 21
    }
}
var target = {};
//浅拷贝
// $.extend(target, obj);
// obj.age = 22;
// obj.gf.name = 'lucy';
// console.log(target, obj);
// console.log(target.gf == obj.gf); // true

// 在$.extend()中第一个参数为true表示深拷贝
$.extend(true, target, obj);
obj.age = 22;
obj.gf.name = 'lucy';
console.log(target, obj);
console.log(target.gf == obj.gf); // false