4、jquery对象选择器+对象值

1、封装js函数
2、浏览器兼容
3、css样式
4、增加脚本健壮

1、对象选择器
             css        juery
元素名       div         $('div') 获取所有 div 元素的 DOM 对象
id           #box        $('#box') 获取一个 ID 为 box 元素的 DOM 对象
类(class)    .box        $('.box') 获取所有 class 为 box 的所有 DOM 对象
群组选择器   span,em,    $('span,em,.box') 获取多个选择器的 DOM 对象
后代选择器   ul li a     $('ul li a') 获取追溯到的多个 DOM 对象
子选择器     div > p {}  $('div p') 只获取子类节点的多个 DOM 对象
通配选择器   *           $('*') 获取所有元素标签的 DOM 对象
next 选择器  div + p {}  $('div + p') 只获取某节点后一个同级 DOM对象
nextAll      div ~ p {}  $('div ~ p') 获取某节点后面所有同级 DOM对象
jQuery 为后代选择器提供了一个等价 find()方法
$('#box').find('p').css('color', 'red'); //和后代选择器等价
jQuery 为子选择器提供了一个等价 children()方法：
$('#box').children('p').css('color', 'red'); //和子选择器等价
jQuery 为 next 选择器提供了一个等价的方法 next()：
$('#box').next('p').css('color', 'red'); //和 next 选择器等价
jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll()：
$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价
在 find()、 next()、 nextAll()和 children()这四个方法中， 如果不传递参数， 就相当于传递了“*”;
$('#box').prev('p').css('color', 'red'); //同级上一个元素
$('#box').prevAll('p').css('color', 'red'); //同级所有上面的元素
$('#box').siblings('p').css('color', 'red'); //同级上下所有元素选定
$('#box').parent() //父元素或节点
var demo = $('div').get(0);
var demoLength = $('div').size();
    demoLength = $('div').length;
juery不存在的id不报错，js要报错
if(document.getElementById('pox')) { |if($('#pox').length > 0) 或if($('#pox').get(0)) 或 if($('#pox')[0])


2、属性选择器
css           jquery
a[title]      $('a[title]') 获取具有这个属性的 DOM 对象
a[title=num1] $('a[title=num1]')获取具有这个属性=这个属性值的 DOM 对象
a[title^=num] $('a[title^=num]')获取具有这个属性且开头属性值匹配的DOM 对象
a[title|=num] $('a[title|=num]')获取具有这个属性且等于属性值或开头属
性值匹配后面跟一个“-” 号的 DOM 对象
a[title$=num] $('a[title$=num]')获取具有这个属性且结尾属性值匹配的DOM 对象
a[title!=num] $('a[title!=num]')获取具有这个属性且不等于属性值 的DOM 对象
a[title~=num] $('a[title~=num]')获取具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的 DOM 对象
a[title*=num] $('a[title*=num]')获取具有这个属性且属性值含有一个指定字串的 DOM 对象
a[bbb][title=num1] $('a[bbb][title=num1]')获取具有这个属性且属性值匹配的 DOM对象

3、过滤选择器
$('li:first') 选取第一个元素 单个元素
$('li:last') 选取最后一个元素 单个元素
$('li:not(.red)') 选取 class 不是 red 的 li 元素 集合元素
$('li.even') 选择索引(0 开始)是偶数的所有元素 集合元素
$('li:odd') 选择索引(0 开始)是奇数的所有元素 集合元素
$('li:eq(2)') 选择索引(0 开始)等于 index 的元素 单个元素
$('li:gt(2)') 选择索引(0 开始)大于 index 的元素 集合元素
$('li.lt(2)') 选择索引(0 开始)小于 index 的元素 集合元素
$(':header') 选择标题元素， h1 ~ h6 集合元素
$(':animated') 选择正在执行动画的元素 集合元素
$(':focus') 选择当前被焦点的元素 集合元素
$('#box li:last')  ==  $('#box li).last()


4、内容过滤选择器
$('div:contains("ycku.com")')   选取含有"ycku.com"文本的元素 元素集合
$('div:empty')   选取不包含子元素或空文本的元素 元素集合
$('ul:has(.red)') 选取含有 class 是 red 的元素 元素集合
$(':parent')   选取含有子元素或文本的元素,选择非空元素 元素集合

5、可见性过滤器
$('p:hidden).size(); //元素 p 隐藏的元素
$('p:visible').size(); //元素 p 显示的元素
hidden 过滤器一般是包含的内容为： CSS 样式为 display:none、 input 表单类型为
type="hidden"和 visibility:hidden 的元素。


对象的值：
html()      获取元素中 HTML 内容
html(value) 设置元素中 HTML 内容
text()      获取元素中文本内容
text(value) 设置原生中文本内容
val()       获取表单中的文本内容
val(value)  设置表单中的文本内容

追加html：
$('#box').html($('#box').html() + '<em>www.li.cc</em>');
$('div').html(function (index, value) {});

属性操作  attr
attr(key)             获取某个元素 key 属性的属性值
attr(key, value)    设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...})  设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {}) 设置某个元素 key 通过 fn 来设置
$('div').removeAttr('title');  //删除指定的属性

元素样式操作
css(name) 获取某个元素行内的 CSS 样式
css([name1, name2, name3]) 获取某个元素行内多个 CSS 样式
css(name, value) 设置某个元素行内的 CSS 样式
css(name, function (index, value) ) 设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2}) 设置某个元素行内多个 CSS 样式
addClass(class) 给某个元素添加一个 CSS 类
addClass(class1 class2 class3...) 给某个元素添加多个 CSS 类
removeClass(class) 删除某个元素的一个 CSS 类
removeClass(class1 class2 class3...) 删除某个元素的多个 CSS 类
toggleClass(class) 来回切换默认样式和指定样式


var box = $('div').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
for (var i in box) { //逐个遍历出来
    alert(i + ':' + box[i]);
}
jQuery 提供了一个遍历工具专门来处理这种对象数组， $.each()方法
$.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
   alert(attr + ':' + value);
});

$('div').click(function () { //当点击后触发
   $(this).toggleClass('red size'); //单个样式多个样式均可
});

var count = 0;
  $('div').click(function () {
    $(this).toggleClass(function () {
         return $(this).hasClass('red') ? 'blue' : 'red size';
       },count++ % 3 == 0); //增加了频率
});

CSS 方法
width() 获取某个元素的长度
width(value) 设置某个元素的长度
width(function (index, width) {}) 通过匿名函数设置某个元素的长度

height() 获取某个元素的长度
height(value) 设置某个元素的长度
height(function (index, width) {}) 通过匿名函数设置某个元素的长度
$5章