jquery写作方式:
jQuery(document).ready(function() { alert("Hello"); });
//jQuery 可简写为 $
$(document).ready(function() { alert("Hello"); });
//$(document) 可以简写为 $()
$().ready(function() { alert("Hello"); });
//$(document).ready() 也可以简写为 $()
$(function() { alert("Hello"); });
window.onload与$(function(){})区别
window.onload() 发生在页面载入完成时,
$(document).ready() 发生在页面主体框架载入完成时(或许某个图片还没下载完);
基本选择
代码:
<div id="div1">AAA</div>
<div class="class1">BBB</div>
<span id="div3">CCC</span>
<div class="class2"><span>222</span></div>
<div class='class3'><span id='span2'>hello world</span></div>
<div class='class3'><label id='span2'>label</label></div>
根据 id 选择$("#div1")
根据class选择$(".class1")
根据标签名选择$('span')
选择所有的对象$("*")
混合选择$("#div1,.class1,span")
分层选择$(".class2 span")或者$(".class2").find('span')
只从子层中选择
选择所有紧跟在 div 后面的 span
选择 #id2 后面同一层级的所有(*)对象
混合使用 $(".class3 label,.class2>span")
选择同一层级的其他元素$("#div1").siblings();
选择同一层级的其他 span $("#div1").siblings('span');
特殊字符含义
# 指示 id
. 指示 class* 全选
, 多选
空格 后代
> 子
~ 兄弟
+ 下一个
: 子(多功能)
() 函数式的过滤与查找
选取子对象
代码
定位子对象
<h3>AAA</h3>
<ul>
<li>
<li>北京下的不是雪,而是“珍珠米</li>
</ul>
<ul>
<li>
</ul>
<ul>
<li>上海给力N日游之奢华恒隆是这样</li>
<li>从这个世界走来一个小小的我--蝉想</li>
<li>恋爱是不是一场明码交易?</li>
</ul>
获取所有标题对象
获取 first
获取每组的 first
获取 last
获取每组的 last $("li:last-child")或$("ul li:last-child")
获取第几个 $("li:eq(2)")或$("li").eq(2)
获取第几个之后的 $("li:gt(2)") //gt是0开始
获取第几个之前的$("li:lt(2)")//lt是0开始
获取索引数是偶数的 $("li:even")//even是0开始
获取索引数是奇数的$("li:odd")//odd是0开始
获取每小组第偶数个$("li:nth-child(even)")//nth-child是1开始
获取每小组第奇数个$("li:nth-child(odd)")//nth-child是1开始
获取每小组第几个:$("li:nth-child(2)")//nth-child是1开始的
表达式获取第几个$("li:nth-child(3n-1)")//n是从1开始的
如果是父元素中唯一的子元素 $("li:only-child")
not是取其反
根据属性来选择
代码
<div id="names">names</div>
<div id="hello"
<div id="spans"
<div id="worlds">worlds</div>
<div id="empty"></div>
指定元素包含id的$("div[id]")
指定元素中不包含id的$("div:not([id])")
名称为ss的元素 $("div[name='ss']")
名称不为ss的元素$("div[name!='ss']")
元素符合以world开始的$("div[id^='world']")
以o结束的$("div[id$='o']")
id 中包含ll的$("div[id*='ll']")
多个条件的,有id属性并且name中包含d的$("div[id][name*='d']")
查找内容中包括world的$("div:contains('world')")
查找包括span 的$("div:has('span')")
查找空的div
查找父元素$("div:parent")
hidden和visible分别对应隐藏和显示的元素
$("div:hidden")//获取隐藏的元素
$("div:visible")//获取显示的元素
表单元素的获取
:input匹配
:text匹配<input type='text' />
:password匹配<input type='password' />
:radio 匹配<input type='radio' />
:checkbox 匹配<input type='checkbox' />
:submit 匹配<input type='submit' />
:button 匹配<input type='button' /> <button />
:reset 匹配<input type='reset' />
:image 匹配<input type='image' />
:file 匹配<input type='file' />
:enabled匹配所有可用的input
:disabled匹配所有不可