jQuery
jQuery简介
3.1 什么是jQuery(了解)
jQuery是一个JS的框架
jQuery是一个轻量的、免费开源的JS函数库
作用是用于简化JS代码
核心思想 “写的更少，做的更多”
轻量的：如果一个项目对一个技术或者框架的依赖程度越高，那么这个技术或框架越重。反之，依赖程度越低，这个技术或框架越轻。
3.2 jQuery的优势(了解)
(1)可以极大的简化JS代码
(2)可以像CSS选择器一样获取元素
(3)可以通过操作css样式控制页面的效果
$("div").css("border","1px solid blue");
$("div").css({
"border" : "1px solid blue",
"color" : "#fff",
"font-size" : "30px"
});
(4)可以兼容常用的浏览器
js: div2.removeNode innerText
谷歌、火狐、苹果、欧朋、IE
3.3 jQuery引入
由于jQuery的库文件就是一个普通的JS文件, 所以和引入JS文件相同：
<script src="js/jquery-1.8.3.js"></script>
如果引入后,通过f12(开发人员工具)查看到浏览器的控制台报出如下错误, 则说明jQuery文件引入失败!
3.4 文档就绪事件函数
jQuery提供的文档就绪事件函数:
$(function(){
//这里的代码将会在整个网页被加载完之后立即执行
...
})
js提供的文档就绪事件函数:
window.onload = function(){
//这里的代码将会在整个网页被加载完之后立即执行
...
}
什么时候需要使用文档就绪事件函数?
通常是通过JS获取元素时,当获取元素的代码执行时,元素本身还没有被加载, 此时元素是获取不到的!
解决方法:
(1)将获取元素的代码放到body的最后面,执行顺序就变成了先加载元素本身, 再获取元素, 此时就一定可以获取到。
(2)或者将获取元素的代码放在文档就绪事件函数中, 等整个网页被加载完了(此时获取的元素也一定被加载过了), 再获取元素就一定可以获取到!
例如: jQuery提供的文档就绪事件函数
$( function(){
//获取id为h1元素
var h1 = document.getElementById("h1");
//获取h1元素的内容
alert( h1.innerHTML );
} );
js提供的文档就绪事件函数:
window.onload = function(){
//获取id为h1元素
var h1 = document.getElementById("h1");
//获取h1元素的内容
alert( h1.innerHTML );
}
4 jQuery选择器(重点掌握)
4.1 基本选择器
1、元素名(标签名)选择器
$("div") -- 匹配所有div元素
$("span") -- 匹配所有span元素
2、类选择器
$(".c1") -- 匹配所有class值为c1的元素
$(".mini") -- 匹配所有class值为mini的元素
$("div.mini") -- 匹配所有class值为mini的div元素
3、ID选择器
$("#d1") -- 匹配id值为d1的元素
4.2 层级选择器
1、后代选择器
$("div span") -- 匹配所有div内部的所有span元素
$("#d1 span") -- 匹配id值为d1元素内部的所有span元素
2、相邻兄弟选择器
如果两个元素具有相同的父元素, 并且是紧挨着, 这两个元素就是相邻兄弟元素, 可以通过前面的元素匹配后面的元素
$("#two+span") -- 匹配id为two的元素后面紧邻span兄弟元素
等价于:
$("#two").next("span")
-- 匹配id为two的元素后面紧邻span兄弟元素
相类似的:
$("#two").prev("span")
-- 匹配id为two的元素前面紧邻span兄弟元素
3、$("#two~div")
$("#two~span")
-- 匹配id为two的元素后面所有的span兄弟元素
等价于:
$("#two").nextAll("span")
-- 匹配id为two的元素后面所有的span兄弟元素
相类似的:
$("#two").prevAll("span")
-- 匹配id为two的元素前面所有的span兄弟元素
作用等价于nextAll+prevAll的:
$("#two").siblings("span")
-- 匹配id为two的元素前后所有的span兄弟元素
4.3 基本过滤选择器
1、:first | :last
$("div:first") -- 匹配所有div中第一个div元素
等价于:
$("div:eq(0)") -- 匹配所有div中第一个div元素
$("div").eq(0) -- 匹配所有div中第一个div元素
$("div:last") -- 匹配所有div中最后一个div元素
等价于:
$("div:eq(-1)") -- 匹配所有div中最后一个div元素
$("div").eq(-1) -- 匹配所有div中最后一个div元素
2、:eq(n)
$("div:eq(n)") -- 匹配所有div中第n+1个div元素
5 综合案例
5.1 全选或全不选
练习1：点击全选设置 员工所在的行全选或者全不选
function checkAll(){
//获取全选复选框的状态(选中? 取消选中) property
var isCK = $("#all").prop("checked");
console.log( isCK );
//将全选复选框的选中状态设置给所有普通复选框
$("input[type='checkbox']:not(#all)").prop("checked", isCK);
}
练习2：点击按钮,计算所有被选中商品的总金额
function getSum(){
//1.获取所有被选中的普通复选框
var $inps = $("input[name='item']:checked");
var sum = 0;
//for循环遍历所有匹配到的元素
/*
for( var i=0; i<$inps.length;i++ ){
sum += ($inps[i].value - 0); //inps[i]是js对象
} */
//使用jQuery提供的each函数进行遍历
$inps.each( function(){
//this是js对象，$(this)是jQuery对象
sum += ( $( this ).val() - 0 );
} );
//将总金额设置到span元素内部
$("#count").html( sum );
}
5.2 创建表格元素
练习1：创建单行单列的表格
function createTable1(){
//创建一个table元素
var $table = $("<table></table>");
//创建一个tr元素
var $tr = $("<tr></tr>");
//创建一个td元素
var $td = $("<td></td>");
$td.html("hello,我是td");
//将td添加到tr内部
$tr.append( $td );
//将tr添加到table内部
$table.append( $tr );
//将整个table添加到body内部
$("body").append( $table );
//$("body").append("<table><tr><td>Hello, td!!!</td></tr></table>")
}
练习2_1：创建单行6列的表格
function createTable2(){
//创建一个table元素
var $table = $("<table></table>");
//创建一个tr元素
var $tr = $("<tr></tr>");
for (var i = 0; i < 6; i++) {
//创建一个td元素
var $td = $("<td></td>");
$td.html("hello,我是td");
//将td添加到tr内部
$tr.append( $td );
}
//将tr添加到table内部
$table.append( $tr );
//将整个table添加到body内部
$("body").append( $table );
}
练习2_2：创建5行6列的表格
function createTable2(){
//创建一个table元素
var $table = $("<table></table>");
for (var i = 0; i < 5; i++) {
//创建一个tr元素
var $tr = $("<tr></tr>");
for (var j = 0; j < 6; j++) {
//创建一个td元素
var $td = $("<td></td>");
$td.html("hello,我是td");
//将td添加到tr内部
$tr.append( $td );
}
//将tr添加到table内部
$table.append( $tr );
}
//将整个table添加到body内部
$("body").append( $table );
}
练习3：创建指定行和列的表格
function createTable3(){
//接收用户输入的行数和列数
var rows = $("#rows").val() - 0;
var cols = $("#cols").val() - 0;
//创建一个table元素
var $table = $("<table></table>");
for (var i = 0; i < rows; i++) {
//创建一个tr元素
var $tr = $("<tr></tr>");
for (var j = 0; j < cols; j++) {
//创建一个td元素
var $td = $("<td></td>");
$td.html("hello,我是td");
//将td添加到tr内部
$tr.append( $td );
}
//将tr添加到table内部
$table.append( $tr );
}
//将整个table添加到body内部
$("body").append( $table );
}
5.3 仿QQ好友列表
/** 通过jQuery实现仿QQ列表好友列表 */
function openDiv( thisobj ){
/*
//获取当前分组的状态(关闭或展开)
var dis = $(thisobj).next("div").css("display");
if( dis == "none" ){ //隐藏, 关闭
$(thisobj).next("div").show();
}else{
$(thisobj).next("div").hide();
} */
//先关闭其他分组
//$("table tr td span").not( thisobj ).next("div").hide();
$(thisobj).parents("tr").siblings("tr").find("div").hide();
//获取当前分组内的div,并切换当前分组状态
$(thisobj).next("div").slideToggle(200);
}
5.4 总结
5.4.1 html元素操作
1、创建元素
$("<div></div>") -- 创建一个div元素(没有任何内容)
$("<div>xxxx</div>") -- 创建一个div元素(有内容)
2、添加子元素
var $div = $("<div></div>");
$("body").append( $div ) -- 将创建的div元素添加到 body内部
或
$("body").append("<div></div>") -- 将创建的div元素添加到body内部
3、删除元素
$("div").remove() -- 获取所有div并将所有div删除。
$("#one").remove() -- 删除id为one的元素
4、替换元素
$("div").replaceWith("<p>我是来替换的!</p>")
-- 将所有div元素替换为p元素
5.4.2 html元素内容及值的操作
<div id="div1">
这是一个div元素
<span>这是一个span元素</span>
</div>
1、html() -- 获取或设置元素的html内容
$("#div1").html() -- 获取id为div1的元素的所有内容，返回的是：
这是一个div元素
<span>这是一个span元素</span>
$("#div1").html("我是来替换的！！") -- 为id为div1的元素设置html内容，设置后的结果为：
<div id="div1">
我是来替换的！！
</div>
2、text()
$("#div1").text() -- 获取id为div1的元素的所有文本内容，返回的是：
这是一个div元素
这是一个span元素
$("#div1").text("我是来替换的！！") -- 为id为div1的元素设置文本内容，设置后的结果为：
<div id="div1">
我是来替换的！！
</div>
<input type="text" id="username" name="username" value="张三"/>
3、val() -- 获取或设置元素的value值(比如：input、select、option、textarea)
$("#username").val() -- 获取id为username元素的value值，等价于:
document.getElementById("username").value
$("#username").val( 值 )
-- 为id为username的元素设置value值，等价于：
document.getElementById("username").value = 值
5.4.3 html元素属性及css属性操作
<input type="text" id="username" name="username" />
1、prop() -- 获取html元素的属性值，或为html元素的属性设置值
$("#username").prop("name")
-- 获取id为username的元素的name属性值，返回值为：username
$("#username").prop("name", "user")
-- 将id为username的元素的name属性值设置为user,设置后的结果为:
<input type="text" id="username" name="user" />
2、css() -- 获取html元素的css样式的值, 或为html元素设置css样式
$("#div1").css("width") -- 获取id为div1的元素的宽度
$("#div1").css("border") -- 获取id为div1的元素的边框
$(".mini").css("background", "#EE82EE");
-- 为所有class为mini的元素设置背景颜色
$(".mini").css({
"background" : "#EE82EE",
"color" : "yellow",
"border" : "2px solid blue"
});
-- 为所有class值为mini的元素同时设置背景颜色、字体颜色、边框。
5.5 补充:事件绑定
为元素绑定事件的常用方式, 以点击事件为例.
为下面的input按钮（id="b1"）绑定点击事件
<input type="button" id="b1" value="b1" />
方式一：
<input type="button" id="b1" value="b1"
onclick="fn()"/>
方式二：
var b1 = document.getElementById("b1");
b1.onclick = function(){
alert("b1按钮被点击了...")
}
方式三：
$("#b1").click( function(){
alert("b1按钮被点击了......");
} );
浙公网安备 33010602011771号