先弄一个简单示例，要不能不好理解。
<div id="shouye" data-id="8"> <div class="zwnr dyg"> <ul class="liebiao"> <li class="cli">第一个LI</li> <li class="cli">第二个LI</li> <li class="cli">中间的LI省略</li> <li class="cli">最后个LI</li> </ul> </div> <div class="zwnr2"> <audio src="xxx.mp3" data-id="6"></audio> <ul class="liebiao"> <li class="cli">第一个LI</li> <li class="cli">第二个LI</li> <li class="cli">中间的LI省略</li> <li class="cli">最后个LI</li> </ul> </div> </div>
| 选择器 | 说明 | 实时 |
$('#shouye') $("[id='shouye']") | 用id选择 所有 id 属性的值等于 "shouye" 的元素 | 否 |
$('.zwnr > ul') | 直接子元素 | 否 |
$('ul') | 用标签 选择 | 否 |
$('li.cli') | 用标签 + 样式名 选择 | 否 |
$('li:first') $('li:last') | 第一个LI 最后一个LI | 否 |
$('li:even') $('li:odd') | 所有偶数的LI 所有奇数的LI | 否 |
$('li:eq(0)') $('li:eq(1)') | 第1个LI（从0开始的） 第2个LI | 否 |
$('.zwnr.dyg') | 同时是 class="zwnr" 和 class="dyg" 的元素 | 否 |
$('.zwnr , .dyg') | 只是class="zwnr" 或者是 class="dyg" 的元素 | 否 |
$('.zwnr .liebiao') | 在class="zwnr" 元素内的 class="liebiao" 的元素 | 否 |
$('div:not(.zwnr,#shouye)') | 不是 class="zwnr" 也不是 id="shoueye" 的 DIV | 否 |
$('#shouye').data("id") | 获取data-id的值(不能获取动态改变后的值) | 否 |
$('#shouye').attr("id") | 获取data-id的值(实时获取该值) | 动态 |
$('li').closest(".zwnr") | LI可以通过 .closest 找到 class=zwnr 的祖宗元素 | |
$(".zwnr2").children("audio") | 当前元素 标签为音频文件 的直接子元素 | |
$(".zwnr2").next() | 当前元素的下一个同级元素 | |
$(".zwnr2").prev() | 当前元素的上一个同级元素 | |
$(".zwnr2").parent() | 当前元素的父元素 | |
$("audio")[0] $("audio").get(0) | 音频元素，两种方法，将 jq对象 转成 js对象。 转换后可以操作音频 | |
$('ul li', $('.zwnr') ) | 通过当前元素 定位另一个元素，一般用在函数内 比如 $('ul li', this) this对象内的 li | |
| 函数选择器 | 说明 | 实时 |
$("ul").hover(function(){ //鼠标停在上面时执行的代码 },function(){ //鼠标指针移出元素执行的代码 }); | 鼠标划进元素和划出元素执行的代码 | 否 |
$("li").mouseover(function(){ }); | 鼠标划入事件 | 否 |
$("li").mouseout(function(){ }); | 鼠标划出事件 | 否 |
$("li").on('mouseover' , function(){ }); | 鼠标划入事件 | 是 |
$("li").on('mouseout' , function(){ }); | 鼠标划出事件 | 是 |
$('.zwnr').on('mouseover' , '.cli', function(){ }); | 鼠标经过ajax添加的LI元素也可以执行划入事件 （父元素开头，on括号里是要触发的子元素，委托） | 是 |
$('.zwnr').on('mouseout' , '.cli', function(){ }); | 鼠标经过ajax添加的LI元素也可以执行划出事件 （父元素开头，on括号里是要触发的子元素，委托） | 是 |
$("li").click(function(){ alert("LI元素被点击了。"); }); | 点击事件代码 | 否 |
$('li').on('click' , function() { alert("LI元素被点击了。"); }); | 普通动态添加的LI可以被点击 | 是 |
$('.zwnr').on('click' , '.cli', function() { alert("LI元素被点击了。"); }); | 通过ajax动态添加的LI元素也可以被点击。 （父元素开头，on括号里是要触发的子元素，委托） | 是 |
$('li').on('click' , function() { var jqsy = $(this).closest("#shouye"); var jssy = $(jqsy)[0]; var jssy = $(jqsy).get(0); }); | this 是当前点击的对象，是js对象 $(this) 是转换后的jq对象 jq对象 通过加 [0] 或者 .get(0) 转成js对象 | |
