1. jQuery简介
a) jQuery是一个第三方的js框架, 底层对js进行了封装, 简化了js的使用方式, 提供了大量的好用的方法.
b) 官网: http://jquery.com/, 下载网址: http://www.jq22.com/jquery-info122
c) jQuery的版本
- 3.x.x, 只支持最新的浏览器, 不支持ie6, ie7, ie8
- 2.x.x, 不支持较老的浏览器, 支持主流的浏览器
- 1.x.x, 支持所有的浏览器(包括老版本)
2. jQuery的使用
a) 在项目中加入jQuery文件(jquery.js, jquery.min.js)
- jquery.js: 格式良好, 有注释有换行缩进, 较大, 用于学习
- jquery.min.js: 压缩文件, 没有格式, 很小, 用于实际开发
b) 在html页面中将脚本引入
|
<script type="text/javascript" src="js/jquery.min.js"></script> |
c) jQuery的核心是一个jQuery(), 这个函数特别常用, 所以有一个别名, 叫$().
d) jQuery的页面就绪函数, 需要调用ready(), 由于太常用, 所以进行了简化.
|
// 页面就绪函数 jQuery(document).ready(function() { alert("jquery的就绪函数"); }); $(document).ready(function() { alert("$就绪函数"); }); $(function() { alert("终极就绪"); }); |
3. js对象和jQuery对象的转换
a) js对象和jQuery对象是不同的, 但是它们可以互相转换
b) jQuery对象àjs对象
- 可以通过中括号的方式: [0]
|
console.info($("#box")[0].innerHTML); |
- 可以调用get方法: get(0)
|
console.info($("#box").get(0).innerHTML); |
c) js对象àjQuery对象, 可以将js对象用$()包裹
|
console.info($(document.getElementById("box")).html()); |
4. jQuery选择器
4.1 基本选择器
4.1.1 id选择器
#id名
|
console.info($("#box")); |
4.1.2 元素选择器
元素(标签)名
|
console.info($("div")); |
4.1.3 类选择器
.class名
|
console.info($(".demo")); |
4.1.4 通用选择器
*, 代表所有元素
|
console.info($("*")); |
4.1.5 群组选择器
selector1, selector2, ...
|
console.info($("#box, .demo")); |
4.2 层级选择器
4.2.1 匹配所有后代元素
使用空格
|
console.info($("#box div")); |
4.2.2 匹配所有子元素
使用大于号 >
|
console.info($("#box > div")); |
4.2.3 匹配下一个紧邻的兄弟元素
使用 +
|
console.info($("#demo + div")); |
4.2.4 匹配后续所有的兄弟元素
使用 ~
|
console.info($("#demo ~ div")); |
4.3 简单选择器
4.3.1 首尾选择
:first和:last
|
// 匹配第一个 $("tr:first").css("background-color", "#33F"); // 匹配最后一个 $("tr:last").css("background-color", "#CF3"); |
4.3.2 索引选择
:eq(), :lt()和:gt()
|
// 匹配等于某个索引 $("tr:eq(2)").css("background-color", "#3FC"); // 匹配小于某个索引 $("tr:lt(2)").css("background-color", "#CF3"); // 匹配大于某个索引 $("tr:gt(2)").css("background-color", "#3CF"); |
4.3.3 奇偶选择
:odd和:even
|
// 匹配奇数, 以索引来判断 $("tr:odd").css("background-color", "#3CF"); // 匹配偶数 $("tr:even").css("background-color", "#CF3"); |
4.3.4 标题选择
:header, 用于选择<h1>~<h6>标题标签
|
// 匹配所有的标题标签 : h1~h6 $(":header").css("color", "#FC3"); |
4.3.5 反选
:not
|
$("tr:not(:first)").css("color", "#FC3"); |
4.4 其他选择器
4.4.1 属性选择器
a) [attribute], 选择带有某个属性的元素
b) [attribute=value], 选择某个属性等于某个值的元素
c) [attribute!=value], 选择某个属性不等于某个值的元素
d) [attribute^=value], 选择某个属性以某个值开头的元素
e) [attribute$=value], 选择某个属性以某个值结尾的元素
f) [attribute*=value], 选择某个属性包含某个值的元素
g) [selector1][selector2][selectorN], 选择多个属性时使用
4.4.2 表单选择器
a) :input, 匹配所有input, textarea, select和button元素
b) :text, :password, :radio, :checkbox, :submit, :reset, :image, :button, :hidden, :file. 分别匹配对应type的input元素.
c) :checked, 匹配所有被选中的radio和checkbox.
d) :selected, 匹配所有被选中的option
e) :enabled, 匹配所有可用元素
f) :disabled, 匹配所有不可用的元素
5. jQuery操作属性
a) attr(), 用于获取或添加(修改)元素的属性
b) removeAttr(), 用于删除元素的属性
|
function test1() { // 获取属性 console.info($("#ft").attr("color")); }
function test2() { // 修改(添加)属性 $("#ft").attr("color", "#FC3"); }
function test3() { // 删除属性 $("#ft").removeAttr("color"); } |
6. jQuery操作CSS样式
a) css(), 用于添加, 修改, 获取某个css样式
b) addClass(), 用于添加一个类样式
c) removeClass(), 用于删除一个类样式
d) toggleClass(), 用于切换一个类样式
|
<style type="text/css"> .demo { 200px; height: 100px; border: 1px solid #FF0000; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> function test1() { // 获取css样式 console.info($("#box").css("border")); }
function test2() { // 修改(添加)css样式 $("#box").css("color", "#C3F"); $("#box").css("background-color", "#FC3"); }
function test3() { // 添加类样式 $("#box").addClass("demo"); }
function test4() { // 删除类样式 $("#box").removeClass("demo"); }
function test5() { // 切换类样式 $("#box").toggleClass("demo"); } </script> |
7. jQuery操作文本和值
a) html(), 支持html标签, 可以获取和赋值
b) text(), 不支持html标签, 可以获取和赋值
c) val(), 操作表单域的值, 可以获取和赋值
|
function test1() { // 获取div中的内容 console.info($("div").html()); // 获取div中的文本 console.info($("div").text()); }
function test2() { // 给div赋值内容 $("div").html("<i>倾斜的div</i>"); $("div").text("<i>倾斜的div</i>"); }
function test3() { // 操作值(表单) console.info($("#demo").val()); $("#demo").val("李四"); } |
8. jQuery事件
8.1 jQuery事件和js事件的区别
a) js中常用的事件: onclick, ondblclick, onmousemove, onmouseover, onmouseout, onfocus, onblur, onkeydown, onkeyup, onload, onsubmit, onreset, ...
b) jQuery中所有的事件都没有on
8.2 jQuery中事件的绑定
a) 通过元素.事件(函数)的方式进行事件的绑定
|
$("#box").click(function() { alert("你好!"); }); |
b) 通过元素.bind(事件名称, 函数)的方式进行事件的绑定
|
$("#box").bind("mouseover", function() { $(this).css("border", "2px dashed #FC3"); }); $("#box").bind("mouseout", function() { $(this).css("border", "2px dotted #C3F"); }); |
c) 可以使用one(事件名称, 函数)方法只绑定一次事件
|
$("#bd").one("click", function() { window.open("http://jd.com", "广告", "width=500, height=300, top=100, left=200"); return false; // 防止跳转 }); |
d) live()和on(), 可以给现有的元素和将来的元素绑定事件
l live(), 在1.7版本之前使用
l on(), 1.7版本后推荐使用
|
// 1.7前使用live $(".del").live("click", function() { var ename = $(this).parent().prev().prev().prev().html(); if(confirm("确定要删除[" + ename + "]吗?")) { $(this).parent().parent().remove(); } }); // 1.7后使用on $(document).on("click", ".del", function() { var ename = $(this).parent().prev().prev().prev().html(); if(confirm("确定要删除[" + ename + "]吗?")) { $(this).parent().parent().remove(); } }); |
8.3 jQuery中事件的解绑定
调用unbind方法可以解除事件的绑定, 不传参表示解除所有事件, 传参表示解除指定的事件.
|
function test1() { // 解除所有事件的绑定 $("#box").unbind(); // 解除指定事件的绑定 $("#box").unbind("click"); } |
8.4 jQuery事件的执行
通过"事件名()"的方式可以执行触发事件时的函数
|
$("#bd").click(); |
9. jQuery操作文档结构
a) append(): 向某个元素中追加元素
b) appendTo(): 将某个元素追加到另外一个元素中
c) remove(): 移除某个元素
d) empty(): 清空某个元素的内容
e) before(): 在某个元素前插入一个元素
f) insertBefore(): 将一个元素插到某个元素前
g) after(): 在某个元素后插入一个元素
h) insertAfter(): 将一个元素插到某个元素后
10. 文档结构+事件+筛选练习
员工管理
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>员工管理系统</title> <style type="text/css"> table { 50%; border-collapse: collapse; text-align: center; } th, td { border: 1px solid grey; } </style> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() { // 绑定添加事件 $("#btnAdd").click(function() { // 获取用户输入的信息 var ename = $(":text:first").val(); var email = $(":text:eq(1)").val(); var sal = $(":text:last").val(); // 生成tr标签 $("<tr />") .append($("<td>"+ename+"</td>")) .append($("<td>"+email+"</td>")) .append($("<td>"+sal+"</td>")) .append($("<td><input type='button' class='del' value='del' /></td>")) .appendTo($("table")); // 清空输入框 $(":text:first").val(""); $(":text:eq(1)").val(""); $(":text:last").val(""); // 获得焦点 $(":text:first").focus(); }); // 给删除按钮绑定事件 // 1.7后使用on $(document).on("click", ".del", function() { var ename = $(this).parent().prev().prev().prev().html(); if(confirm("确定要删除[" + ename + "]吗?")) { $(this).parent().parent().remove(); } }); }); </script> </head> <body> <center> ename: <input type="text" /> email:<input type="text" /> sal:<input type="text" /><br /> <input id="btnAdd" type="button" value="add" /> <hr /> <table> <tr> <th>姓名</th> <th>邮箱</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>Smith</td> <td>smith@163.com</td> <td>800</td> <td><input type="button" value="del" class='del' /></td> </tr> <tr> <td>King</td> <td>king@163.com</td> <td>5000</td> <td><input type="button" value="del" class='del' /></td> </tr> </table> </center> </body> </html> |