jQuery:
版本:1.8.3
本质:js的一个库
入门:$(function(){
Jquery
代码
});
获取元素:JS:document.getElementById();
JQ:$(“#id”);
jQuery对象与DOM对象转换:
function
JSWrite
(){
//document.getElementById("span1").innerHTML="
美美哒!
";
var
spanEle
=
document
.getElementById(
"span1"
);
$(spanEle).html(
"
美美哒!
"
);
}
$(
function
(){
/*document.getElementById("btn1").onclick = function(){
document.getElementById("span1").innerHTML="
帅帅哒!
";
}*/
$(
"#btn1"
).click(
function
(){
//JQ
对象转换成
DOM
对象的第一种方式
//$("#span1")[0].innerHTML="
呵呵哒!
";
//JQ
对象转换成
DOM
对象的第二种方式
$(
"#span1"
).get(
0
).innerHTML
=
"
呵呵哒!
"
;
});
});
注意
:JQ
对象只能操作JQ
里面的属性和方法
JS
对象只能操作JS
里面的属性和方法
jQuery的效果(实现广告弹出):
第一步:引入jQuery
相关的文件
第二步:书写页面加载函数
第三步:在页面加载函数中,获取显示广告图片的元素。
第四步:设置定时操作(
显示广告图片的函数)
第五步:在显示广告图片的函数中,使用jQuery
的方法让广告图片显示(show())
第六步:清除显示广告图片的定时操作
第七步:设置定时操作(
隐藏广告图片的函数)
第八步:在隐藏广告图片的函数中,使用jQuery
的方法让广告图片隐藏(hide())
第九步:清除隐藏广告图片的定时操作
jQuery的选择器
基本选择器
id
选择器:$(“#id
名称”);
元素选择器:$(“
元素名称”);
类选择器:$(“.
类名”);
通配符:*
多个选择器共用(
并集)
代码示例
<
script
>
$(
function
(){
$(
"#btn1"
).click(
function
(){
$(
"#one"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn2"
).click(
function
(){
$(
".mini"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn3"
).click(
function
(){
$(
"div"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn4"
).click(
function
(){
$(
"*"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn5"
).click(
function
(){
$(
"#two .mini"
).
css
(
"background-color"
,
"pink"
);
});
});
</
script
>
层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(
儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(
儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(
紧挨着的,同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(
兄弟)
<
script
>
$(
function
(){
$(
"#btn1"
).click(
function
(){
$(
"body div"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn2"
).click(
function
(){
$(
"body>div"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn3"
).click(
function
(){
$(
"#two+div"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn4"
).click(
function
(){
$(
"#one~div"
).
css
(
"background-color"
,
"pink"
);
});
});
</
script
>
基本过滤选择器
$('li').first() 等价于:$(“li:first”)
<
script
>
$(
function
(){
$(
"#btn1"
).click(
function
(){
$(
"div:first"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn2"
).click(
function
(){
$(
"div:last"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn3"
).click(
function
(){
$(
"div:odd"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn4"
).click(
function
(){
$(
"div:even"
).
css
(
"background-color"
,
"pink"
);
});
});
</
script
>
属性选择器:
<
script
>
$(
function
(){
$(
"#btn1"
).click(
function
(){
$(
"div[id]"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn2"
).click(
function
(){
$(
"div[id='two']"
).
css
(
"background-color"
,
"pink"
);
});
});
</
script
>
表单选择器:
<
script
>
$(
function
(){
$(
"#btn1"
).click(
function
(){
$(
":input"
).
css
(
"background-color"
,
"pink"
);
});
$(
"#btn2"
).click(
function
(){
$(
":text"
).
css
(
"background-color"
,
"pink"
);
});
});
</
script
>
使用JQ实现表格的隔行换色 :
第一步:引入jquery
的类库
第二步:直接写页面加载函数
第三步:直接使用jquery
的选择器(
组合选择)
拿到需要操作的元素(
奇数行和偶数行)
第四步:分别使用CSS
的方法(css(name,value))
对奇数行和偶数行设置背景颜色。
<
script
>
$(
function
(){
$(
"tbody tr:even"
).addClass(
"even"
);
$(
"tbody tr:odd"
).addClass(
"odd"
);
});
</
script
>
使用jQuery实现全选和全不选
第一步:引入jquery
文件
第二步:书写页面加载函数
第三步:为上面的复选框绑定单击事件
第四步:将下面所有的复选框的选中状态设置成跟上面的一致!
<
script
>
$(
function
(){
//
找到下面所有的复选框并设置属性
checked()
/*if($("#select")[0].checked==true){
$(".selectOne").attr("checked",true)
}*/
$(
"#select"
).click(
function
(){
$(
".selectOne"
).
attr
(
"checked"
,this.checked);
});
});
</
script
>
注意:
attr
在
jquery1.11
版本不适用,采用
prop()
来替代
(
在各个版本都适用
)
。