JQuery
基础
jQuery基础操作
jQuery命名规范
以$开头
jQuery写法
由于一般开发中jQuery代码一般是在头文件中引用的,而不是写在html页面的body下。为了保证jQuery的正常使用,一般写法如下
$(document).ready(function(){
//此处写代码
});
jQuery对象与dom对象的转换
<input type="text" id="t1" value="jack">
var username = document.getElementById('t1'); //获取input标签
alert(username.value);
var $username = $(username); //将dom对象转换成jQuery对象
alert($username.val());
var username2 = $username[0] //将jQuery对象转换成dom对象
alert(username2.value)
var username3 = $username.get(0); //jQuery提供get方法转换成dom对象
alert(username3.value);
选择器
基本选择器*
id选择器
#id <xxx id=''> 通过id值获得元素
通过id选择器将id为1的div背景颜色给成红色
<input type="button" id="bt1" value="bt1">
<div id="d1" style="width: 30px;height: 30px; background-color: #666666;"></div>
$(document).ready(function () {
$('#bt1').click(function () {
$('#d1').css('background-color','red');
alert('使用id选择器')
});
});
element 标签选择器
<xxx> 通过标签名获得元素
将所有div的背景改成红色
<div id="d1" style="width: 30px;height: 30px; background-color: #666666;"></div>
<div id="d2" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
<hr>
<div id="d3" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
<input type="button" id="bt3" value="bt3">
$(document).ready(function () {
$('#bt3').click(function () {
$('div').css('background-color','red');
});
});
.class 类选择器
<xxx class=''> 通过class值获得元素
通过类选择器将 class=mi的所有标签背景改成红色
<input type="button" id="bt2" value="bt2">
<div id="d2" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
<hr>
<div id="d3" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
$(document).ready(function () {
$('#bt2').click(function () {
$('.mi').css('background-color','red');
});
});
s1,s2,… 多选择器
将多个选择器的结果添加到一个数组
同时选择id为1和id为2的div,并将他们的背景颜色改成红色
<input type="text" id="t1" value="jack" >
<input type="button" id="bt1" value="bt1">
<div id="d1" style="width: 30px;height: 30px; background-color: #666666;"></div>
<input type="button" id="bt2" value="bt2">
<div id="d2" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
<hr>
<div id="d3" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
<input type="button" id="bt3" value="bt3">
<input type="button" id="bt4" value="bt4">
$(document).ready(function () {
$('#bt5').click(function () {
$('#d1,#d2').css('background-color','red');
});
});
所有 *
将所有标签 的背景颜色改成红色
<input type="text" id="t1" value="jack" >
<input type="button" id="bt1" value="bt1">
<div id="d1" style="width: 30px;height: 30px; background-color: #666666;"></div>
<input type="button" id="bt2" value="bt2">
<div id="d2" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
<hr>
<div id="d3" style="width: 30px;height: 30px; background-color: #666666;" class="mi"></div>
<input type="button" id="bt3" value="bt3">
<input type="button" id="bt4" value="bt4">
$(document).ready(function () {
$('#bt4').click(function () {
$('*').css('background-color','red');
});
});
层级选择器
html
<body>
<input type="button" value="选择 body内的所有div元素." id="btn1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
<input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn5"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
A B 获得A元素下的所有B元素(爷孙)
选择 body内的所有div元素
$('#btn1').click(function () {
$('body div').css('background-color','red');
});
A>B 获得A元素下的所有B子元素(父子)
在body内,选择子元素是div的
$('#btn2').click(function () {
$('body>div').css('background-color','red');
});
A+B 获得A元素后面的第一个兄弟B(兄弟)
选择 id为one 的下一个div元素
$('#btn3').click(function () {
$('#one+div').css('background-color','red');
});
A~B 获得A元素后面的所有兄弟B(兄弟)
选择 id为two的元素后面的所有div兄弟元素
$('#btn4').click(function () {
$('#two~div').css('background-color','red');
});
选择 id为two的元素的所有div兄弟元素
$('#btn5').click(function () {
$('#two').siblings('div').css('background-color','red');
});
基本过滤
写法 :关键字
html
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择第一个div元素." id="btn1"/>
<input type="button" value="选择最后一个div元素." id="btn2"/>
<input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
<input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
<input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
<input type="button" value="选择索引值等于3的元素." id="btn6"/>
<input type="button" value="选择索引值大于3的元素." id="btn7"/>
<input type="button" value="选择索引值小于3的元素." id="btn8"/>
<input type="button" value="选择所有的标题元素." id="btn9"/>
<input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
<input type="text" value="请输入账号" defaultValue="请输入账号" style="color:#999" />
<input type="text" value="请输入密码" defaultValue="请输入密码" style="color:#999"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
:first 第一个
{# <input type="button" value="选择第一个div元素." id="btn1"/>#}
$('#btn1').click(function () {
$('div:first').css('background-color','red');
});
:last 最后一个
{# <input type="button" value="选择最后一个div元素." id="btn2"/>#}
$('#btn2').click(function () {
$('div:last').css('background-color','red');
});
:eq(index) 获得指定索引
{# <input type="button" value="选择索引值等于3的元素." id="btn6"/>#}
$('#btn6').click(function () {
$('div:eq("3")').css('background-color','red');
});
:gt(index) 大于
{# <input type="button" value="选择索引值大于3的元素." id="btn7"/>#}
$('#btn7').click(function () {
$('div:gt("3")').css('background-color','red');
});
:lt(index) 小于
{# <input type="button" value="选择索引值小于3的元素." id="btn8"/>#}
$('#btn8').click(function () {
$('div:lt("3")').css('background-color','red');
});
:even 偶数,从0开始计数
{# <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>#}
$('#btn4').click(function () {
$('div:even').css('background-color','red');
});
:odd 奇数
{# <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>#}
$('#btn5').click(function () {
$('div:odd').css('background-color','red');
});
:not(selector) 去除所有与指定选择器匹配的元素
{# <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>#}
$('#btn3').click(function () {
$('div:not(".one")').css('background-color','red');
});
:header 获得所有标题元素:例如
{# <input type="button" value="选择所有的标题元素." id="btn9"/>#}
$('#btn9').click(function () {
$(':header').css('background-color','red');
});
:animated 获得所有动画
{# <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>#}
$('#btn10').click(function () {
$(':animated').css('background-color','red');
});
:focus 获得所有焦点
输入框
$("input[type='text").on('blur focus',function () {
//拿到属性为defaultValue 的值
var dv = $(this).attr('defaultValue')
//判断是否是获取焦点
if( $(this).is(':focus')){
//将输入框内的值清空
if ($(this).val() == dv){
$(this).val('')
}
}else {
//将输入框内的值设置为defaultValue的值
if ($(this).val() == ''){
$(this).val(dv)
}
}
})
内容过滤
html
<h3>内容过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
<input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
<input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
<input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
:empty 当前元素是否为空
// <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
$("#btn2").click(function(){
$("div:empty").css("background-color","#ff0");
});
:has(…) 当前元素是否含有指定的子元素
// <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
$("#btn3").click(function(){
$("div:has('.mini')").css("background-color","#ff0");
});
:parent 当前元素是否是父元素
// <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
$("#btn4").click(function(){
$("div:parent").css("background-color","#ff0");
});
});
:contains(text) 标签体是否含有指定的文本
// <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
$("#btn1").click(function(){
$("div:contains('di')").css("background-color","#ff0");
});
可见性过滤*
html
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br/><br/>
<input type="button" value=" 选取所有可见的div元素" id="b1"/>
<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
<br /><br />
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="mover">正在执行动画的span元素.</span>
:hidden 隐藏的(特指 )
{# <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>#}
$('#b2').click(function () {
$('div:hidden').css('background-color','red').show(1000);
});
:visible 可见的(默认)
{# <input type="button" value=" 选取所有可见的div元素" id="b1"/>#}
$('#b1').click(function () {
$('div:visible').css('background-color','red');
});
each用法一
{# <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>#}
$('#b3').click(function () {
//each
$('input:hidden').each(function () {
alert($(this).val())
});
});
each用法二
{# <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>#}
$('#b4').click(function () {
//$(.each) 全局函数
//回调函数
//参数一:index 遍历索引 参数二 domEle 当前遍历的对象 等于 this
$.each($('input:hidden'),function (index, domEle) {
alert(index+'@'+$(domEle).val())
});
});
属性*
html
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
<input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
<input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
<input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
<input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
<input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
<br /><br />
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
<h3>可见性过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br/><br/>
<input type="button" value=" 选取所有可见的div元素" id="b1"/>
<input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
<input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b4"/>
<br /><br />
<!--文本隐藏域-->
<input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="mover">正在执行动画的span元素.</span>
[attribute] 获得指定属性名的元素
{# <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>#}
$('#btn1').click(function () {
$("div[title]").css('background-color','red');
});
[attribute = value] 获得属性名 等于 指定值 的元素
{# <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>#}
$('#btn2').click(function () {
$("div[title='test']").css('background-color','red');
});
[attribute != value] 获得属性名 不等于 指定值 的元素
{# <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>#}
$('#btn3').click(function () {
$("div[title!='test']").css('background-color','red');
});
[as1]【as2】[as3]… 复合选择器,多个条件同时成立。
类似where…and…and
{# <input type="button" value="组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>#}
$('#btn7').click(function () {
$("div[id][title*='es']").css('background-color','red');
});
[attribute ^= value] 获得以属性值 开头 的元素
{# <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>#}
$('#btn4').click(function () {
$("div[title^='te']").css('background-color','red');
});
[attribute $= value] 获得以属性值 结尾 的元素
{# <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>#}
$('#btn5').click(function () {
$("div[title$='est']").css('background-color','red');
});
[attribute *= value] 获得含有属性值 的元素
{# <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>#}
$('#btn6').click(function () {
$("div[title*='es']").css('background-color','red');
});
子元素过滤
html
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<h3>子元素过滤选择器.</h3>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/>
<br /><br />
<div class="one" id="one" >
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" >
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
:nth-child(index) 获得第几个孩子,从1开始
$(document).ready(function () {
{# <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>#}
$('#btn1').click(function () {
//子元素选择器使用前提,表达式前面必须是元素。例如:$('div:nth-child(2)')
//如果元素上添加条件,必须使用空格$('div[class="one"] :nth-child(2)')
//$('div[class="one"] :nth-child(2)').css('background-color','red')
$('div.one :nth-child(2)').css('background-color','red')
/*
* $("div.one") 所有的div,自己的样式为one
* $("div .one") 所有的div中后代元素,样式为one
*/
});
:first-child 获得第一个孩子
{# <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>#}
$('#btn2').click(function () {
$('div.one :first-child').css('background-color','red')
});
:last-child 获得最后一个孩子
{# <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>#}
$('#btn3').click(function () {
$('div.one :last-child').css('background-color','red')
});
:only-child 获得独生子
{# <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/>#}
$('#btn4').click(function () {
$('div.one :only-child').css('background-color','red')
});
表单过滤
:input 所有的表单元素
(///)
:text 文本框
:password 密码框
:radio 单选
:checkbox 复选框
:submit 提交按钮
:image 图片按钮
:reset 重置按钮
:button 普通按钮
/
:file 文件上传
:hidden 隐藏域
表单对象过滤*
html
<h3> 表单对象属性过滤选择器.</h3>
<button type="reset">重置所有表单元素</button>
<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
<br /><br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取下拉框选中的内容.</button>
<br /><br />
可用元素:<input name="add" value="可用文本框"/> <br/>
不可用元素:<input name="email" disabled="disabled" value="不可用文本框"/><br/>
可用元素: <input name="che" value="可用文本框" /><br/>
不可用元素:<input name="name" disabled="disabled" value="不可用文本框"/><br/>
<br/>
多选框:<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<div id="checkboxDivId"></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
下拉列表1:<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected" value="hunan">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
下拉列表2:<br/>
<select name="test2" >
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
<div id="selectDivId"></div>
:enabled 可用
{# <button id="btn1">对表单内 可用input 赋值操作.</button>#}
$('#btn1').click(function () {
$('input:enabled').val('aaaaaaaa')
});
:disabled 不可用
{# <button id="btn2">对表单内 不可用input 赋值操作.</button>#}
$('#btn2').click(function () {
$('input:disabled').val('bbbbb')
});
:checked 选中(单选框 radio、复选框 checkbox)
{# <button id="btn3">获取多选框选中的个数.</button>#}
$('#btn3').click(function () {
alert($('input[name="newsletter"]:checked').length)
});
:selected 选择(下拉列表 select option)
$('#btn4').click(function () {
$('select :selected').each(function () {
// $('#selectDivId').append($(this).html())
$('#selectDivId').append($(this).text())
});
});
demo案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态列表效果.html</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
{#.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}#}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery -->
<script src="/static/jq/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var AllLi = $('li:gt(4):not(":last")');
$('span').click(function () {
if (AllLi.is(":hidden")){
AllLi.show();
$(this).html('隐藏全部')
}else {
AllLi.hide();
$(this).html('显示全部')
}
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
属性和CSS
属性
attr(name) 获得指定属性的值
attr(key,val) 给一个指定属性名设置值
$(document).ready(function(){
$('[name="username"]').attr('disabled','disabled');
});
attr(prop) 给多个属性名设置值 参数:prop json数据
{k : v, k : v….}
removeAttr(name) 移除指定的属性
$(document).ready(function(){
$('[name="username"]').removeAttr('disabled');
});
CSS类
addClass(className) 追加一个类(样式)
$(document).ready(function(){
$('#btn).click(function(){
$("[name='username']").addClass('textClass')
});
});
removeClass(className) 移除指定类
$(document).ready(function(){
$('#btn).click(function(){
$("[name='username']").removeClass('textClass')
});
});
toggleClass(className) 如果有则移除,如果没有则添加
$(document).ready(function(){
$('#btn).click(function(){
$("[name='username']").toggleClass('textClass')
});
});
HTML/文本/值
val() 获得value的值
val(text) 设置value的值
html() 获得html代码,含有标签
html(text) 设置的是html代码,如果有标签进行解析
text() 获得文本值,将标签进行过滤
text(text) 设置文本值,如果有标签将被转义
CSS
css(name) 获得指定名称的css
css(name,value) 设置指定的css
$(document).ready(function(){
$('div').css('border','1px solid #999');
});
css(prop) 设置一组值
$(document).ready(function(){
$('div').css({
'border':'1px solid #999',
'color':'red',
'width':'200px',
'height':'200px',
'font-size':'60px'
});
});
位置
offset() 获得坐标
返回JSON值{“top”:200,”left”:200}
offset(..) 设置坐标
scrollTop() 垂直滚动条 滚过的距离
scrollLeft() 水平滚动条 滚过的距离
尺寸
height([..])
文档处理
内部插入
html
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<hr/>
<ul id="love">
<li id="fk" name="fankong"反恐></li>
<li id="xj" name="xingji">星际</li>
</ul>
<div id="fool">Hello1</div>
下面的append appendTo实现作用相同
A.append(B) 将B插入到A的内部的后面
之后的串联操作对象为A
<A>
...
<B></B>
</A>
$(document).ready(function () {
$tj = $('#tj');
$love = $('#love');
$love.append($tj)
});
A.prepend(B) 将B插入到A的内部的前面
之后的串联操作对象为A
<A>
<B></B>
...
</A>
$(document).ready(function () {
$tj = $('#tj');
$love = $('#love');
$love.prepend($tj)
});
A.appendTo(B) 将A插入到B的内部的后面
之后的串联操作对象为A
<B>
...
<A></A>
</B>
$(document).ready(function () {
$tj = $('#tj');
$love = $('#love');
$tj.appendTo($love)
});
A.prependTo(B) 将A插入到B的内部的前面
之后的串联操作对象为A
<B>
<A></A>
...
</B>
$(document).ready(function () {
$tj = $('#tj');
$love = $('#love');
$tj.prependTo($love)
});
外部插入
html
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p id="p3">I would like to say:P3</p>
<p id="p2">I would like to say:P2</p>
<p id="p1">I would like to say:P1</p>
A.after(B) 将B插入到A的后面(同级)
$(document).ready(function () {
$city=$('#city')
$p2=$('#p2')
$p2.after($city)
});
A.before(B) 将B插入到A的前面(同级)
$(document).ready(function () {
$city=$('#city')
$p2=$('#p2')
$p2.before($city)
});
A.insertAfter(B) 将A插入到B的后面(同级)
$(document).ready(function () {
$city=$('#city')
$p2=$('#p2')
$city.insertAfter($p2)
});
A.insertBefore(B) 将A插入到B的前面(同级)
$(document).ready(function () {
$city=$('#city')
$p2=$('#p2')
$city.insertBefore($p2)
});
删除
empty() 清空标签体
remove() 删除当前对象
detach() 删除当前对象
remove和detach的区别
remove如果之后再使用,元素本身对象保留,绑定事件 或 绑定数据 都会被移除
detach如果之后再使用,元素本身对象保留,绑定事件 或 绑定数据 都保留
复制
clone(Even[,deepEven]) 克隆
Events 指事件处理函数是否呗复制,V1.5以上版本默认值为:false
替换
A.replaceWith(B) 使用A将B替换
A.replaceAll(B) 使用B将A替换
包裹
A.wrap(B) 使用B将每一个A进行包裹(多个B)
<B><A></A></B>
<B><A></A></B>
A.wrapAll(B) 使用B将每一个A进行包裹(一个B)
<B>
<A></A>
<A></A>
</B>
A.wrapInner(B) 使用B将每一个A的标签体包裹
<A><B>....</B></A>
A.unwrap() 删除A标签的父标签
筛选
选择器可以完成的功能,筛选提供相同函数
选择器 first
筛选 first()
对比:
$(“div:first”) 直接获得第一个div
$(“div”).first() 先获取所有div,从所有div中筛选出第一个div
过滤
eq(index|-index) 类似:eq()
index:正数从0开始获得指定索引的元素
-index:负数 从-1开始获得指定索引的元素
选择索引值等于3的元素
$(document).ready(function(){
$("btn1").click({
$("div").eq(3).css("background-color“,”red“);
});
});
first() 第一个 :first
选择第一个div元素
$(document).ready(function(){
$("btn1").click({
$("div").first().css("background-color“,”red“);
});
});
last() 在最后一个 :last
选择最后一个div元素
$(document).ready(function(){
$("btn1").click({
$("div").last().css("background-color“,”red“);
});
});
is() 判断
样式为hide div 下一个兄弟是否是span标签
$(document).ready(function(){
$("btn1").click({
$("div.hide").next().is("span");
});
});
hasClass() 判断是否是指定的class
其实是 is(“.”+class)
id=one div 样式是否是one
$(document).ready(function(){
$("btn1").click({
$("div#one").hasClass('one');
});
});
filter() 过滤
筛选出与指定表达式匹配的元素集合
选择class为none的所有div
$(document).ready(function(){
$("btn1").click({
$("div").filter(".none").css("background-color“,”red“);
});
});
not() 将指定内容删除
选择样式为one 的div 子元素中没有title属性的 父div
$(document).ready(function(){
$("btn1").click({
$("div").childern().not("[title]").parent().css("background-color“,”red“);
});
});
has() 子元素是否有
选择所有div中含有div的元素
$(document).ready(function(){
$("btn1").click({
$("div").has("div").css("background-color“,”red“);
});
});
slice(start, end) 截取元素,含头不含尾
选择索引为[3,4]的div
$(document).ready(function(){
$("btn1").click({
$("div").slice(3,4).css("background-color“,”red“);
});
});
map() 内部数组
查找
<A>
<B>
<C></C>
<D></D>
<E></E>
<F></F>
</B>
</A>
B.children([…]) 获得所有的子元素
选择id="two"的所有子元素
$(document).ready(function(){
$("btn1").click(fucntion(){
$("two").children().css("background-color","red")
});
});
选择id="two"的 title="other"的子元素
$(document).ready(function(){
$("#btn2").click(function(){
$("#two").children("[title='other']").css("background-color","red");
});
});
A.find() 从指定的区域查询指定元素
D.next() 下一个兄弟
选择id="two"的 下一个兄弟元素
$(document).ready(function(){
$("#btn2").click(function(){
$("#two").next().css("background-color","red");
});
});
D.nextAll() 下面所有的兄弟
选择id="two"的 所有的兄弟元素
$(document).ready(function(){
$("#btn2").click(function(){
$("#two").nextAll().css("background-color","red");
});
});
E.prev() 上一个兄弟
选择id="two"的 上一个兄弟元素
$(document).ready(function(){
$("#btn2").click(function(){
$("#two").prev().css("background-color","red");
});
});
E.prevAll() 前面的 所有兄弟
选择id="two"的 前面的所有的兄弟元素
$(document).ready(function(){
$("#btn2").click(function(){
$("#two").prevAll().css("background-color","red");
});
});
E.siblings() 所有兄弟
选择id="two"的 所有的兄弟元素
$(document).ready(function(){
$("#btn2").click(function(){
$("#two").siblings().css("background-color","red");
});
});
E.parent() 父元素
选择id="two"的 父元素
$(document).ready(function(){
$("#btn2").click(function(){
$("#two").parent().css("background-color","red");
});
});
E.closest(A) 向上获得指定的父元素(含自己)
如果获得 返回一个对象。如果没有获得,返回0
选择title = 'tesst' 父元素body元素
$(document).ready(function(){
$("#btn2").click(function(){
$("div[title='tesst']").closest('body').css("background-color","red");
});
});
C.nextUntil(E) 获得后面所有兄弟
获得C D
F.prevUntil(D) 获得前面的所有兄弟
获得 D E
E.parents() 获得所有父元素
closest 和 parents的区别
- 前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找
- 前者逐级向上查找,知道发现匹配的元素后就停止,后者一直向上寻找直到根元素,然后把这些元素放到一个临时集合中,在用给定的选择器表达式去过滤
- 前者返回0或1个 元素,后者可能包含0或多个元素
串联
将多条语句,改成一条
A.add(B) 将A 和B 组合成一个对象
选择id=one 和two 的div
$(document).ready(function(){
$("#btn1").click(function(){
$("#one").add("#two").css("background-color","red");
});
});
andSelf() 将之前对象添加到操作集合中
A.children().andSelf()
A 孩子 孩子和A
选择id=one的所有孩子和他自己
$(document).ready(function(){
$("#btn1").click(function(){
$("#one").children().andSelf().css("background-color","red");
});
});
end() 回到最近的一个破环性操作之前
A.children().children().end().end()
A 孩子 孙子 孩子 A
选择id=one 所有的孩子,设置颜色为红色,设置one自己为黄色
选择id=one 和two 的div
$(document).ready(function(){
$("#btn1").click(function(){
$("#one").children().css("background-color","#f00").end().css("background-color","#ff0");
//$("#one").children().css("background-color","#f00").parent().css("background-color","#ff0");
//$("#one").css("background-color","#ff0").children().css("background-color","#f00");
});
});
contents() 获得所有的子节点
含有 子元素和文本
选择id=two 子节点个数
$(document).ready(function(){
$("#btn1").click(function(){
$("#two").contents().length;
});
});
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态列表效果.html</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a {
margin: 0 auto;
color:#04D;
display:block;
width: 50px;
height: 20px;
text-align:center;
}
</style>
<!-- 引入jQuery -->
<script src="/static/jq/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('div').children("a").hide().prev('span').click(function () {
$(this).nextAll('a').toggle().parent().siblings('div').find('a').hide()
});
});
</script>
</head>
<body>
<div>
<span>分组1</span>
<a href="">QQ1</a>
<a href="">QQ2</a>
<a href="">QQ3</a>
</div>
<div>
<span>分组2</span>
<a href="">QQ1</a>
<a href="">QQ2</a>
<a href="">QQ3</a>
</div>
<div>
<span>分组3</span>
<a href="">QQ1</a>
<a href="">QQ2</a>
<a href="">QQ3</a>
</div>
</body>
</html>
事件
常见事件总结
blur() 失去焦点
change() 选择
click() 点击
dbclick() 双击
error() 异常
focus() 获得焦点
focusin()
focusout()
keydown() 键盘按下
keypress() 键盘按
keyup() 键盘抬起
mousedown() 鼠标按下
mouseeter()
mouseleave()
mousemove() 鼠标移动
mouseout() 鼠标移除
mouseover() 鼠标移入
mouseup() 鼠标弹起
resize() 改变大小
scroll() 滚动
select() 选择
submit() 提交
unload() 页面卸载
html——demo
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#e01").blur(function(){
$("#textMsg").html("文本框失去焦点:blur");
}).focus(function(){
$("#textMsg").html("文本框获得焦点:focus");
}).keydown(function(){
$("#textMsg").append("键盘按下:keydown");
}).keypress(function(event){
$("#textMsg").append("键盘按:keypress");
}).keyup(function(){
$("#textMsg").append("键盘弹起:keyup");
}).select(function(event){
//支持谷歌
var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
$("#textMsg").html("文本内容被选中:select , " + sub);
});
var i = 0;
$("#e02").mouseover(function(){
$("#divMsg").html("鼠标移上:mouseover");
}).mousemove(function(){
$("#divMsg").html("鼠标移动:mousemove , " + i++ );
}).mouseout(function(){
$("#divMsg").html("鼠标移出:mouseout");
}).mousedown(function(){
$("#divMsg").html("鼠标按下:mousedown");
}).mouseup(function(){
$("#divMsg").html("鼠标弹起:mouseup");
});
$("#e03").click(function(){
$("#buttonMsg").html("单击:click");
}).dblclick(function(){
$("#buttonMsg").html("双击:dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text" /><span id="textMsg"></span> <br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span> <br/>
<hr/>
<input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
</body>
</html>
页面加载
ready()
方式一,标准api
$(document).ready(function(){
});
jQuery(document).ready(function(){
});
方式二,简化版
$(function(){
})
jQuery(function(){
})
处理
bind(type,fn) 给当前对象绑定一个事件
例如:A.bind(“click”,fn) 类似于A.click(fn)
unbind(type) 解绑bind绑定事件
one(type, fn) 给当前对象绑定 一次事件
on(events, fn) 提供绑定事件处理程序所需的所有功能
完成3个方法bind(),delegarte()和live()
off(events) 解绑
trigger(type) 在每个匹配的元素上出发某类事件
会执行浏览器默认动作,也会产生事件冒泡
例如:A.trigger(“submit”) 类似于 A.submit()
triggerHandler(type) 在每个匹配的元素上出发某类事件
但不会执行浏览器默认动作,也不会产生事件冒泡
委派
live(type,fn) 绑定事件,之后动态添加同样的成员,也具有相同事件
die(type) 解绑事件
切换
hover(over, out)
简化版,鼠标移入和移除 。A.mouseover(fn).mouseout(fn) 简化 A.hover(fn, fn)