-
- JQuery 对象和 DOM 对象
jQuery 对象转为 DOM 对象注意:JQuery 对象是一个数组,既然是数组,那么就可以通过下标来转换为 DOM 对象var $btn = $("button"); 获取一个 JQuery 对象,前面有个$alert($btn.length); 输出 btn 长度
DOM 对象转换为 jQuery 对象只需要将 DOM 对象用括号括起来,用 $ 进行包装,就可以转换为 JQuery 对象
$(btn)
- 基本选择器
window.onload 的 jQuery 形式:
$(
function () {
//这就是 window.onload 功能了
})
#id 通过 id 来选择元素,click 叫做事件
$("#btn1").click(function () {
alert();
})
下面这句可以使 id 为 one 的 元素变色
$(
"#one").
css(
"background",
"#ffbbaa");
class 为 mini 的元素 变色
$(
".mini").
css(
"background",
"#ffbbaa");
使所有的 元素 变色
$(
"*").
css(
"background",
"#ffbbaa");
使所有的 div 元素 变色
$(
"div").
css(
"background",
"#ffbbaa");
使 span 元素 且 id 为 one 的元素变色
$(
"
span
,#one").
css(
"background",
"#ffbbaa");
- 层次选择器
选择
body
内的所有
div
元素
$(
"
body div
").
css(
"background",
"#ffbbaa")
在
body
内
,
选择子元素是
div
的
$(
"
body
>
div
").
css(
"background",
"#ffbbaa");
选择
id
为
one
的下一个
div
元素
$(
"#one +
div
").
css(
"background",
"#ffbbaa");
选择
id
为
two
的元素后面的所有
div
兄弟元素
$(
"#two ~
div
").
css(
"background",
"#ffbbaa");
选择
id
为
two
的元素所有
div
兄弟元素
$(
"#two").
siblings(
"div").
css(
"background",
"#ffbbaa");
选择
id
为
one
的下一个
span
元素
$(
"#one").
nextAll(
"
span
:first").
css(
"background",
"#ffbbaa");
"
选择
id
为
two
的元素前边的所有的
div
兄弟元素
$(
"#two").
prevAll(
"div").
css(
"background",
"#ffbbaa");
- 过滤选择器
:first 选取第一个元素
表示选取 第一个 div
$(
"div:first").
css(
"background",
"#ffbbaa");
- 内容过滤选择器
选择 含有文本
'di'
的
div
元素
$(
"
div
:contains('di')").
css(
"background",
"#ffbbaa");
选择不包含子元素
(
或者文本元素
)
的
div
空元素
$(
"
div
:empty").
css(
"background",
"#ffbbaa");
选择含有
class
为
mini
元素的
div
元素
$(
"
div
:has(.mini)").
css(
"background",
"#ffbbaa");
选择含有子元素
(
或者文本元素
)
的
div
元素
$(
"
div
:parent").
css(
"background",
"#ffbbaa");
$(
"
div
:not(:empty)").
css(
"background",
"#ffbbaa");
tips:jQuery 支持方法的连缀,即一个方法返回了一个 jQuery 对象,可以继续调用该对象的其他方法。
- 属性过滤选择器
<
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' 的 div 元素 ." id= "btn7" />
< 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' 的 div 元素 ." id= "btn7" />
<input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>
$(
"#btn1").
click(
function(){
$( " div [title]"). css( "background", "#ffbbaa");
});
$( "#btn2"). click( function(){
$( " div [title='test']"). css( "background", "#ffbbaa");
});
$( "#btn3"). click( function(){
// 选取的元素中包含没有 title 的 div 元素 .
$( " div [title!='test']"). css( "background", "#ffbbaa");
});
$( "#btn4"). click( function(){
$( " div [title^='te']"). css( "background", "#ffbbaa");
});
$( "#btn5"). click( function(){
$( " div [title$='est']"). css( "background", "#ffbbaa");
});
$( "#btn6"). click( function(){
$( " div [title*='es']"). css( "background", "#ffbbaa");
});
$( "#btn7"). click( function(){
$( " div [id][title*='es']"). css( "background", "#ffbbaa");
});
$( "#btn8"). click( function(){
$( " div [title][title!='test']"). css( "background", "#ffbbaa");
$( " div [title]"). css( "background", "#ffbbaa");
});
$( "#btn2"). click( function(){
$( " div [title='test']"). css( "background", "#ffbbaa");
});
$( "#btn3"). click( function(){
// 选取的元素中包含没有 title 的 div 元素 .
$( " div [title!='test']"). css( "background", "#ffbbaa");
});
$( "#btn4"). click( function(){
$( " div [title^='te']"). css( "background", "#ffbbaa");
});
$( "#btn5"). click( function(){
$( " div [title$='est']"). css( "background", "#ffbbaa");
});
$( "#btn6"). click( function(){
$( " div [title*='es']"). css( "background", "#ffbbaa");
});
$( "#btn7"). click( function(){
$( " div [id][title*='es']"). css( "background", "#ffbbaa");
});
$( "#btn8"). click( function(){
$( " div [title][title!='test']"). css( "background", "#ffbbaa");
});
- 子元素过滤选择器
<
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= "btn2" />
< input type= "button" value= " 选取每个 class 为 one 的 div 父元素下的最后一个子元素 ." id= "btn3" />
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素." id="btn4"/>
$(
document).
ready(
function(){
$( "#btn1"). click( function(){
// 选取子元素 , 需要在选择器前添加一个空格 .
$( " div .one :nth-child(2)"). css( "background", "#ffbbaa");
});
$( "#btn2"). click( function(){
$( " div .one :first-child"). css( "background", "#ffbbaa");
});
$( "#btn3"). click( function(){
$( " div .one :last-child"). css( "background", "#ffbbaa");
});
$( "#btn4"). click( function(){
$( " div .one :only-child"). css( "background", "#ffbbaa");
});
});
</ script >
$( "#btn1"). click( function(){
// 选取子元素 , 需要在选择器前添加一个空格 .
$( " div .one :nth-child(2)"). css( "background", "#ffbbaa");
});
$( "#btn2"). click( function(){
$( " div .one :first-child"). css( "background", "#ffbbaa");
});
$( "#btn3"). click( function(){
$( " div .one :last-child"). css( "background", "#ffbbaa");
});
$( "#btn4"). click( function(){
$( " div .one :only-child"). css( "background", "#ffbbaa");
});
});
</ script >
- 表单对象属性过滤选择器
对表单内 可用
input 赋值操作
$(
"
input
:enabled").
val(
"free");
对表单内 不可用
input 赋值操作
$(
":text:disabled").
val(
"free");
获取多选框选中的个数
.
$(
":checkbox[name='newsletter']:checked").
length;
获取多选框选中的内容
$(
":checkbox:checked").
each(
function () {
alert( this. value);
alert( this. value);
});
$(
"
select
:selected").
each(
function () {
alert( this. value);
});
alert( this. value);
});