jQuery笔记3 代码风格及常用选择器记录

原文地址：http://ruofeiblog.com/2016/10/10/jQuery-note-3-selector/

jQ的代码风格

//创建一个匿名函数（等待页面DOM结构加载完毕后执行函数内代码）
$(function(){
    
});

//执行一个jQ css方法，返回一个jQ对象
$('#box').css('color','red');

//连缀写法,返回依然是一个jQ对象
$('#box').css('color','red').css('width','200px');

//返回jQ对象
$('#box');

//返回DOM对象
$('#box').get(0);

//多个库引用$符号冲突的时候，使用$$符号代替jQuery和$
var $$ = jQuery;

//剔除$的所有权，只能使用jQuery
jQuery.noConFlict();

简单选择器

//选择元素标签名，返回多个适配的结果
$('div');
$('div p a');

//选择ID（由于一个页面只能出现一个ID，同名和重复的是不规范的，所以返回的只是一个结果；如果页面中有多个同名的，只能返回第一个结果），记住，一个页面中不能出现多个同名的id，因为这个不规范。
$('#box');
$('div #box');

//选择Class
$('.box');
$('div #title .box');

//集合选择器:返回同时含有box和pox类的所有结果
$('.box.pox');

//群组选择器：返回含有box或含有pox类的所有结果
$('.box,.pox');

//构造选择器：选择器越复杂，解析时间越长
$('div#box p ul li a#link');

//上面的构造选择器可以直接选择末尾的id #link，因为id在html中具有唯一性
$('#link');


//通配选择器器:选择所有的DOM节点（包含html，head，body等标签）
//在全局使用通配选择器，会照成极大的浪费，不建议使用
$('*');

//通配选择器的最佳用法:选择局部标签内的所有DOM节点
$("ul li *");

高级选择器（层次选择器）

//后代选择器：find()方法,选择#box的子节点中的p节点，等价于$('#box p');
$('#box').find(p);

//子选择器：选择#box的子节点，只是第一层子节点，第二层（孙子辈的选不到）。
$('#box > p');

//同级节点的下一个节点选择器：选择指定节点的下一个节点，返回结果只有一个。
$('#box + p');

//jQ选择下一个同级节点的方法:
$('#box').next('p');

//选择指定节点同级后面的节点：nextAll方法，找到#box同级下N个P节点
$('#box ~ p');
$('#box').nextAll('p');

//选择指定节点的上N个节点：prevAll();
$('#box').nextAll('p');

.find() .next() .nextAll()
以上三种方法如果不传参数，就是括号内为空，就等于.next()，变成了通配符，可能造成性能浪费，不建议使用。使用这些方法的速度快于层次选择器*

//nextUntil()方法：选择下N个指定的节点，一直遇到到不是指定的节点时停止。

$('#box').nextUntil('p');

属性选择器

//选择有title的a标签，返回多个
$('a[title]');

//选择title为nub1的a标签
$('a[title=nub1]');

//选择title为nub开头的a标签
$('a[title^=nub]');

//选择title为nub结尾的a标签
$('a[title$=nub]');

//选择title为nub或者以nub开头，后面-xxx的a标签,如：nub-1，nub-2，nub-3，nub-4
$('a[title|=nub]');

//选择有title的且不等于nub的a标签
$('a[title!=nub]');

//选择有title的且等于nub的,以空格为列表的a标签，如：title="nub aaa bbb"
$('a[title~=nub]');

//选择有title的包含nub字符的a标签，如：title="qwqwqwwnubadadassgdg"
$('a[title*=nub]');

//选择有title的包含nub,且含有bbb属性的a标签，如：123。这个多属性选择器适用于上面的所有方法。
$('a[bbb][title=nub]');