jQuery
- 定义：即JavaScript和查询（Query），它是辅助JS开发的js类库。目前最流行的js类库
- 核心思想：write less, do more
- 作用：实现了很多浏览器的兼容问题
- 优势：
- 免费、开源
- 语法设计使得开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
第一个代码
【注】
- ctrl + alt + v：自动创建对象类型和对象名
- 注释：
- ctrl + /：块注释
- ctrl + shift + /：选中区域注释
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--使用jQuery要先导入jQuery-->
<!--由于没有下载jQuery的本地文件，所有使用了网址进行导入-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
// window.onclick = function (){
// var btnObj = document.getElementById("btn001");
// btnObj.onclick = function (){
// alert("hello!")
// }
// }
// 验证jQuery是否导入成功
// alert($);
// 注意这里，如果没有$(function(){})，就不能运行。原因是加上这句表示页面全部加载完成之后运行这个代码，否则没有加载就没有元素可以调用
$(function (){ // 相当于onload事件，表示页面加载完成后
var $btn001 = $("#btn001"); // 表示按id查询标签对象
$btn001.click(function (){
alert("hello");
});
})
</script>
</head>
<body>
<button id="btn001">say hello</button>
</body>
常见问题
- 使用jQuery必须要引入jQuery库
- $是一个函数
- 使用步骤
- 使用jQuery查询到标签对象
- 使用标签对象.click(function(){})
核心函数—$
-
能完成jQuery的很多功能，$()就是调用这个函数
-
作用：传入参数不同，功能就不同
- 参数为函数时：表示页面加载完成之后，相当于window.onload = function(){}
- 参数为HTML字符串时：可以帮助我们快速创建标签对象
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/javascript"> $("<div>" + "<span>div-span1</span>" + "<span>div-span2</span>" + "</div>").appendTo("body"); </script>- 参数选择器字符串为时：
- $("#id属性值"); // id选择器，表示按id查询标签对象
- $(“标签名”); // 标签名选择器，根据指定的标签名查询标签对象
- $(".class属性值"); // 类型选择器，根据class属性查询标签对象
- 参数为DOM对象时：会把这个DOM对象转化为jQuery对象
jQuery对象和DOM对象
- DOM对象
- getElementById()查询出的对象为DOM对象
- getElementByName()查询出的对象为DOM对象
- getElementByTagName()查询出的对象为DOM对象
- CreateElement()创建出的对象为DOM对象
- alert出的效果：[object HTML标签名Element]
- jQuery对象
- 通过jQuery提供的API（应用程序编程接口）创建的对象
- 通过jQuery包装的DOM对象
- 通过jQuery提供的API查询到的对象
- alert出的效果：[object Object]
jQuery对象的本质
- jQuery本质是DOM对象的一个数组
- 同时，jQuery对象还包含了一系列功能函数
jQuery对象和DOM对象的使用区别
- jQuery对象不能使用DOM对象的属性和方法
- DOM对象不能使用jQuery对象的属性和方法
jQuery对象和DOM对象的互相转化
- DOM对象转化为jQuery对象（重点）
- 现有DOM对象
- $(DOM对象)
- jQuery对象转化为DOM对象（重点）
- 现有jQuery对象
- jQuery对象[下标（从0开始）]
- 得到相应的DOM对象
jQuery选择器（重点）
基本选择器
- #ID选择器：根据id查找标签对象
- .class选择器：根据class查找标签对象
- element选择器：根据标签名查找标签对象
- *选择器：表示任意的、所有的元素
- selector1, selector2……组合选择器：合并选择器1、选择器2……的结果并返回
- p.class：表示标签名必须是p标签，而且class类型还要是myclass
- 结果的顺序是页面中从上到下的顺序
【注意】如果没有$(function(){})，就不能运行。原因是加上这句表示页面全部加载完成之后运行这个代码，否则没有加载就没有元素可以调用
$(function(){
$(btn001).click(function(){
// css()可以设置和获取样式
$("#one").css("bacground-color", "blue"); // ID
$(".mini").css("bacground-color", "blue"); // class
$("div").css("bacground-color", "blue"); // element
$("*").css("bacground-color", "blue"); // all
$("span","#true").css("bacground-color", "blue"); // 组合选择器
})
})
层级选择器- , >, +, ~
-
ancestor descendant
-
作用：在给定的祖先元素下匹配所有的后代元素
-
$("ancester descendant")
-
-
parent > child
-
作用：在给定的父元素下匹配所有的子元素
-
$("parent > child") -
注意：只有子节点、孙子节点无效
-
-
prev + next
-
作用：匹配所有紧接在prev元素后的next元素
-
$("prev + next")
-
-
prev ~ siblings
-
作用：匹配 prev 元素之后的所有 siblings 元素
-
$("prev ~ siblings")
-
注：KaTeX parse error: Expected '}', got 'EOF' at end of input: …y(function(){，是(function() {}）的完全写法
过滤选择器
基本过滤选择器-:
-
:first
-
获取第一个元素
-
$('li:first');
-
-
:last
-
获取最后个元素
-
$('li:last')
-
-
:not(selector)
-
去除所有与给定选择器匹配的元素
-
$("input:not(:checked)")
-
-
:even
-
匹配所有索引值为偶数的元素，从 0 开始计数
-
$("tr:even")
-
-
:odd
-
匹配所有索引值为奇数的元素，从 0 开始计数
-
$("tr:odd")
-
-
:eq(index)
-
匹配一个给定索引值的元素
-
$("tr:eq(1)")
-
-
:gt(index)
-
匹配所有大于给定索引值的元素
-
$("tr:gt(0)")
-
-
:lt(index)
-
匹配所有小于给定索引值的元素
-
$("tr:lt(2)")
-
-
:header
-
匹配如 h1, h2, h3之类的标题元素
-
$(":header").css("background", "#EEE");
-
-
:animated
-
匹配所有正在执行动画效果的元素
-
$("#run").click(function(){ $("div:not(:animated)").animate({ left: "+=20" }, 1000);});
-
内容过滤选择器-:
-
:contains(text)
-
匹配包含给定文本的元素
-
$("div:contains('John')")
-
-
:empty
-
匹配所有不包含子元素或者文本的空元素
-
$("td:empty")
-
-
:has(selector)
-
匹配含有选择器所匹配的元素的元素
-
$("div:has(p)").addClass("test");
-
-
:parent
-
匹配含有子元素或者文本的元素（非空）
-
$("td:parent")
-
属性过滤选择器-[]
-
[attribute]
-
匹配包含给定属性的元素。
-
$("div[id]")
-
-
[attribute=value]
-
匹配给定的属性是某个特定值的元素
-
$("input[name='newsletter']").attr("checked", true);
-
-
[attribute!=value]
-
匹配所有不含有指定的属性，或者属性不等于特定值的元素。
-
$("input[name!='newsletter']").attr("checked", true);
-
-
[attribute^=value]
-
匹配给定的属性是以某些值开始的元素
-
$("input[name^='news']")
-
-
[attribute$=value]
-
匹配给定的属性是以某些值结尾的元素
-
$("input[name$='letter']")
-
-
[attribute*=value]
-
匹配给定的属性是以包含某些值的元素
-
$("input[name*='man']")
-
-
[selector1] [selector2] …… [selectorN]
-
复合属性选择器，需要同时满足多个条件时使用。
-
$("input[id][name$='man']")
-
表单过滤选择器-:
-
:input
-
匹配所有 input, textarea, select 和 button 元素（范围很大，一般不用）
-
$(":input")
-
-
:text
-
匹配所有的单行文本框(type=text)
-
$(":text")
-
-
:password
- 查找所有密码框(type=password)
-
:radio
- 匹配所有单选按钮(type=radio)
-
:checkbox
- 查找所有复选框(type=checkbox)
-
:submit
- 匹配所有提交按钮，理论上只匹配 type=“submit” 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。(type=submit)
-
:image
- 匹配所有图像域(type=image)
-
:reset
- 查找所有重置按钮(type=reset)
-
:button
- 查找所有按钮(type=button)
-
:file
- 查找所有文件域(type=file)
-
:hidden
-
匹配所有不可见元素，或者type为hidden的元素
-
$("tr:hidden")// style="display:none", type="hidden"
-
-
:visible
-
匹配所有的可见元素
-
$("tr:visible")
-
-
:enabled
-
匹配所有可用元素
-
$("input:enabled")// 除了disabled="disabled"
-
-
:disabled
-
匹配所有不可用元素
-
$("input:disabled")// 只匹配disabled="disabled"
-
-
:checked
-
匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
-
$("input:checked")
-
-
:selected
-
匹配所有选中的option元素
-
$("select option:selected")
-
【注】
-
val()可以操作表单项的value值，可以进行设置和获取
-
// each()是jQuery对象提供用来遍历的方法 // 在遍历过程中的function函数中，有一个this对象，就是当前遍历到的DOM对象$checkbody.each(function(){ alert(this.value)});
jQuery元素筛选-.
-
.eq(index)
-
获取当前链式操作中第N个jQuery对象，返回jQuery对象
-
功能和:eq()一样
-
当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个
-
类似的有get(index),不过get(index)返回的是DOM对象
-
$("p").eq(2)$("p").eq(-2)
-
-
.first()
-
功能和:first()一样
-
获取第一个元素
-
$('li').first()
-
-
.last()
-
功能和:last()一样
-
获取最后个元素
-
$('li').last()
-
-
.filer(exp)
-
筛选出与指定表达式匹配的元素集合。
-
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
-
$("p").filter(".selected") // .***就代表class，#***就代表id
-
-
.is()
-
判断是否匹配给定的选择器，只要有一个匹配就返回True
-
$("input[type='checkbox']").parent().is("form")
-
-
.has(exp)
-
保留包含特定后代的元素
-
功能和:has()一样
-
将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。
-
$('li').has('ul').css('background-color', 'red');
-
-
.not(exp)
-
功能和:not()一样
-
从匹配元素的集合中删除与指定表达式匹配的元素
-
$("p").not( $("#selected")[0] )
-
-
.children(exp)
-
功能和parent>child一样
-
取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
-
$("div").children()
-
-
.find(exp)
-
功能和ancestor descendant一样
-
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
-
$("p").find("span")
-
-
.next()
-
取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
-
功能和prev + next相同
-
$("p").next()
-
-
.nextAll()
-
功能和prev ~ siblings一样
-
查找当前元素之后所有的同辈元素。
-
可以用表达式过滤。
-
$("div:first").nextAll().addClass("after");
-
-
.nextUntil()
-
查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
-
$("div:first").nextUntil("span").addClass("after")
-
-
.parent()
-
取得一个包含着所有匹配元素的唯一父元素的元素集合。
-
$("p").parent(".selected")
-
-
.prev(exp)
-
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
-
$("p").prev()
-
-
.prevAll()
-
查找当前元素之前所有的同辈元素
-
可以用表达式过滤。
-
$("div:last").prevAll().addClass("before");
-
-
.prevUntil()
-
查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
-
$('#term-2').prevUntil('dt').css('background-color', 'red');
-
-
.siblings(exp)
-
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
-
可以用可选的表达式进行筛选。
-
$("div").siblings()
-
-
.add()
-
把与表达式匹配的元素添加到jQuery对象中。
-
这个函数可以用于连接分别与两个表达式匹配的元素结果集。
-
$("p").add(document.getElementById("a"))
-
jQuery的属性操作-.
-
.html()
-
可以设置和获取起始标签和结束标签中的内容。
-
功能跟dom属性中的innerHTML一样
-
html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
-
$('p').html(); // 返回p元素的内容。$("p").html("Hello <b>world</b>!"); // 设置所有 p 元素的内容
-
-
.text()
-
可以设置和获取起始标签和结束标签中的文本。
-
功能跟dom属性中的innerText一样
-
$('p').text(); // 返回p元素的文本内容。$("p").text("Hello world!"); // 设置所有 p 元素的文本内容
-
-
.val()
-
可以设置和获取表单项的value属性值。
-
功能跟dom属性中的value一样
-
$("input").val(); // 获取文本框中的值$("input").val("hello world!"); // 设定文本框的值// 批量操作$(":radio").val(["radio1"]); // 单选$(":checkbox").val(["checkbox1", "checkbox2"]); // 多选$("#multiple").val(["mul1","mul2"]); // 多选下拉$("#single").val([“single2"]); // 单选下拉$(":radio,:checkbox").val(["radio1","checkbox1", "checkbox2"]); // 一次多组操作，可更换后面的顺序
-
-
.attr()
-
设置或返回被选元素的属性值。
-
不推荐操作checked、readOnly、selected、disabled等等
-
还可以操作自定义的属性，比如abc
-
$("img").attr("src"); // 返回文档中所有图像的src属性值。$("img").attr({ src: "test.jpg", alt: "Test Image" }); //为所有图像设置src和alt属性。$("img").attr("src","test.jpg"); // 为所有图像设置src属性。$("img").attr("title", function() { return this.src }); // 把src属性的值设置为title属性的值。 -
官方认为返回undefined是一个错误，因此出现了prop()
-
-
.prop()
-
获取在匹配的元素集中的第一个元素的属性值。
-
只推荐操作attr()不推荐操作的内容
-
$("input[type='checkbox']").prop("checked"); // 选中复选框为true，没选中为false// 禁用页面上的所有复选框。$("input[type='checkbox']").prop({ disabled: true}); // 禁用和选中所有页面上的复选框。$("input[type='checkbox']").prop("disabled", true);$("input[type='checkbox']").prop("checked", true);// 通过函数来设置所有页面上的复选框被选中。$("input[type='checkbox']").prop("checked", function( i, val ) { return !val;});
-
实践1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完整的全选全不选功能</title>
<!--使用jQuery要先导入jQuery-->
<!--由于没有下载jQuery的本地文件，所有使用了网址进行导入-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"> </script>
<script type="text/javascript">
$(function(){
// 全选
var $btn001 = $("#quanxuan");
$btn001.click(function (){
// alert("全选");
$("input[type='checkbox']").prop("checked", true);
})
// 全不选
var $btn002 = $("#quanbuxuan");
$btn002.click(function (){
$("input[type='checkbox']").prop("checked", false);
})
// 反选
var $btn003 = $("#fanxuan");
// 对四个球类
$btn003.click(function (){
$("input[class='ball']").prop("checked", function (i,val){
return !val;
})
// 老师的写法
// $(":checkbox[class='ball']").each(function (){
// this.checked = !this.checked;
// })
// 对全选/全不选复选框操作
// alert($("input[class='ball']:checked").length)
// if ($("input[class='ball']:checked").length == $("input[class='ball']").length){
// $("#top").prop("checked", true)
// }else {
// $("#top").prop("checked", false)
// }
$("#top").prop("checked", $("input[class='ball']:checked").length == $("input[class='ball']").length);
})
// 提交
var $btn004 = $("#tijiao");
$btn004.click(function (){
// alert($("input[class='ball']:checked").length);
$("input[class='ball']:checked").each(function (){
alert(this.value);
});
})
// 操作全选/全不选复选框
$("#top").click(function (){
// 除了each遍历，在事件的function函数中也有一个this对象，保存当前响应事件的dom对象
// alert(this.checked)
$("input[class='ball']").prop("checked", this.checked)
})
// 对所有的球类进行操作
// 查询多个复选框也是一个jQuery对象，和选择一个按钮一样
$("input[class='ball']").click(function (){
$("#top").prop("checked", $("input[class='ball']:checked").length == $("input[class='ball']").length);
})
});
</script>
</head>
<body>
你的运动爱好是？
<input type="checkbox" id="top">全选/全不选
<br>
<input type="checkbox" class="ball" value="足球">足球
<input type="checkbox" class="ball" value="篮球">篮球
<input type="checkbox" class="ball" value="乒乓球">乒乓球
<input type="checkbox" class="ball" value="羽毛球">羽毛球
<br>
<button id="quanxuan">全选</button>
<button id="quanbuxuan">全不选</button>
<button id="fanxuan">反选</button>
<button id="tijiao">提交</button></body></html>
DOM的增删改
-
DOM就是一个描述标签的对象，以下操作就是对标签进行增删改
-
内部插入
-
appendTo()
-
把所有匹配的元素追加到另一个指定的元素元素集合中。
-
把.前的内容插入到()中的元素的子元素末尾，成为最后一个子元素
-
// HTML代码<p>I would like to say: </p><div></div><div></div>$("p").appendTo("div");// 结果<div><p>I would like to say: </p></div><div><p>I would like to say: </p></div>
-
-
prependTo()
-
把所有匹配的元素前置到另一个、指定的元素元素集合中。
-
把.前的内容插入到()中的元素的子元素前面，成为第一个子元素
-
// HTML代码<p>I would like to say: </p><div id="foo"></div>$("p").prependTo("#foo");// 结果<div id="foo"><p>I would like to say: </p></div>
-
-
-
外部插入
-
insertAfter()
-
把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
-
a.insertAfter(b) // ba
-
// HTML代码<p>I would like to say: </p><div id="foo">Hello</div>$("p").insertAfter("#foo");// 结果<div id="foo">Hello</div><p>I would like to say: </p>
-
-
insertBefore()
- 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
- a.insertAfter(b) // ab
-
-
替换
-
replaceWith()
-
a.replaceWith(b); // b替换掉a
-
将所有匹配的元素替换成指定的HTML或DOM元素。
-
// HTML代码<p>Hello</p><p>cruel</p><p>World</p>$("p").replaceWith("<b>Paragraph. </b>");// 把所有的段落标记替换成加粗的标记。<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>// HTML代码<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div></div>$('.third').replaceWith($('.first'));// 用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换。<div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div></div>
-
-
replaceAll()
-
用匹配的元素替换掉所有 selector匹配到的元素。
-
// HTML代码<p>Hello</p><p>cruel</p><p>World</p>$("<b>Paragraph. </b>").replaceAll("p");// 使用方法与replaceWith()正好相反<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>
-
-
-
删除
-
remove()
-
从DOM中删除所有匹配的元素。
-
// HTML代码<p>Hello</p> how are <p>you?</p>$("p").remove();how are// HTML代码<p class="hello">Hello</p> how are <p>you?</p>$("p").remove(".hello");how are <p>you?</p>
-
-
empty()
-
删除匹配的元素集合中所有的子节点。
-
// HTML代码<p>Hello, <span>Person</span> <a href="#">and person</a></p>$("p").empty();<p></p>
-
-
实践2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右互换</title>
<style type="text/css">
/*看得到的复选框的大小*/
select{
width: 100px;
height: 150px;
}
/*给一个容器，容器的规格*/
div{
width: 130px;
float: left;
text-align: center;
}
</style>
<!--使用jQuery要先导入jQuery-->
<!--由于没有下载jQuery的本地文件，所有使用了网址进行导入-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
// 选中添加到右边
$("button:eq(0)").click(function (){
$("select:eq(0) option:selected").appendTo($("select:eq(1)"))
})
// 选中添加到左边
$("button:eq(2)").click(function (){
$("select:eq(1) option:selected").appendTo($("select:eq(0)"))
})
// 全部添加到右边
$("button:eq(1)").click(function (){
$("select:eq(0) option").appendTo($("select:eq(1)"))
})
// 全部添加到左边
$("button:eq(3)").click(function (){
$("select:eq(1) option").appendTo($("select:eq(0)"))
})
})
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="right">
<select multiple="multiple" name="sel02">
</select>
<button>选中添加到左边</button>
<button>全部添加到左边</button>
</div>
</body>
</html>
实践3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加删除</title>
<!--使用jQuery要先导入jQuery-->
<!--由于没有下载jQuery的本地文件，所有使用了网址进行导入-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
// 操作提交事件
$("#addEmpButton").click(function (){
// 获取输入框的姓名邮箱工资
var name = $("#impName").val();
var email = $("#email").val();
var salary = $("#salary").val();
// 创建一个行标签对象，添加到显示数据的表格中
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>"+ email +"</td>" +
"<td>" + salary +"</td>" +
"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
"</tr>")
$trObj.appendTo($("#employeeTable"))
// 给添加的行绑定删除事件
$trObj.find("a").click(function (){
// 在function中有一个this对象，是当前正在相应的dom对象
// 得到要删除的行对象
var $trObj = $(this).parent().parent()
// 得到你要删除的行的名字
var $name = $trObj.find("td:first").text()
// alert(1)
// confirm是js提供的一个确认提示函数，你给他什么，他就提示什么
// 当用户点击确定就返回true
if(confirm("确认删除"+ $name +"？")){
$trObj.remove();
}
// 点击超链接，会默认跳转
// return false； 可以阻止元素的默认行为
return false;
})
})
// 删除
$("a").click(function (){
// 在function中有一个this对象，是当前正在相应的dom对象
// 得到要删除的行对象
var $trObj = $(this).parent().parent()
// 得到你要删除的行的名字
var $name = $trObj.find("td:first").text()
// alert(1)
// confirm是js提供的一个确认提示函数，你给他什么，他就提示什么
// 当用户点击确定就返回true
if(confirm("确认删除"+ $name +"？")){
$trObj.remove();
}
// 点击超链接，会默认跳转
// return false； 可以阻止元素的默认行为
return false;
})
})
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>50</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Lisa</td>
<td>Lisa@lisa.com</td>
<td>5555</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="impName">
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
优化代码-函数复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加删除</title>
<!--使用jQuery要先导入jQuery-->
<!--由于没有下载jQuery的本地文件，所有使用了网址进行导入-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
// 创建一个用于复用的删除函数
var deleteFun = function (){
// 在function中有一个this对象，是当前正在响应的dom对象
// 得到要删除的行对象
// 在复用时，这个this并不起作用，因为在创建函数时，没有响应的事件
var $trObj = $(this).parent().parent()
// 得到你要删除的行的名字
var $name = $trObj.find("td:first").text()
// alert(1)
// confirm是js提供的一个确认提示函数，你给他什么，他就提示什么
// 当用户点击确定就返回true
if(confirm("确认删除"+ $name +"？")){
$trObj.remove();
}
// 点击超链接，会默认跳转
// return false； 可以阻止元素的默认行为
return false;
}
// 操作提交事件
$("#addEmpButton").click(function (){
// 获取输入框的姓名邮箱工资
var name = $("#impName").val();
var email = $("#email").val();
var salary = $("#salary").val();
// 创建一个行标签对象，添加到显示数据的表格中
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>"+ email +"</td>" +
"<td>" + salary +"</td>" +
"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
"</tr>")
$trObj.appendTo($("#employeeTable"))
// 给添加的行绑定删除事件
$trObj.find("a").click(deleteFun)
})
// 删除
$("a").click(deleteFun)
// $("a").click(deleteFun())
// 加上（）之后给click的是函数的返回值，去掉之后才是这个函数，所以加上（）是错误的写法
})
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>50</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Lisa</td>
<td>Lisa@lisa.com</td>
<td>5555</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="impName">
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
CSS样式操作
-
先定义好css样式，然后通过class属性，添加到相应的标签中
-
addClass()
-
添加样式
-
为每个匹配的元素添加指定的类名。
-
$("p").addClass("selected"); $("p").addClass("selected1 selected2");
-
-
removeClass()
-
删除样式
-
从所有匹配的元素中删除全部或者指定的类。
-
$("p").removeClass("selected"); $("p").removeClass(); // 删除匹配元素的所有类
-
-
toggleClass()
-
有就删除，没有就添加样式
-
$("p").toggleClass("selected");
-
-
offset()
-
获取和设置元素坐标
-
获取匹配元素在当前视口的相对偏移。
-
返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。
-
// HTML代码 <p>Hello</p><p>2nd Paragraph</p> var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); // 获取第二段的偏移 <p>Hello</p><p>left: 0, top: 35</p> // 设置 $("p:last").offset({ top: 10, left: 30 });
-
动画操作
-
以下动画方法可以添加函数
-
第一个参数：执行的时长，以毫秒为单位
-
第二个参数：动画的回调函数（动画完成后自动调用的函数）
-
var abc = function(){ $("#id").toggle(1000, abc) } abc() // 实现反复重复一个动画
-
-
基本动画：实际上是操纵元素的宽和高
-
show()
-
将隐藏的元素显示
-
<p style="display: none">Hello</p> $("p").show()
-
-
hide()
-
将可见的元素隐藏
-
$("p").hide()
-
-
toggle()
-
可见就隐藏，不可见就显示
-
$('td).toggle();
-
-
-
淡入淡出动画
-
fadeIn()
-
淡入，慢慢可见
-
$("p").fadeIn("slow");
-
-
fadeOut()
-
淡出，慢慢消失
-
$("p").fadeOut("slow");
-
-
fadeTo()
- 在指定时长内慢慢的将透明度修改到指定的值
- 0：透明，1：完全可见，0.5：半透明
-
fadeToggle()
-
淡入、淡出切换
-
$("p").fadeToggle("slow","linear");
-
-
实践4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品牌展示</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, .showless{clear: both;text-align: center; padding-top: 10px}
.showmore a, .showless a{display: block;width: 120px; margin: 0 auto; line-height: 24px; border: 1px solid #AAA}
/*.showmore 是一个类选择器*/
/*.showmore a span，这是一个后代选择器，只对使用此样式的标签要有a作为子标签，且a有子标签span的结构有作用*/
.showmore a span{padding-left: 15px; background: url(img/down.gif) no-repeat 0 0}
.showless a span{padding-left: 15px; background: url(img/up.gif) no-repeat 0 0}
.promoted a{color: #f50;}
</style>
<!--使用jQuery要先导入jQuery-->
<!--由于没有下载jQuery的本地文件，所有使用了网址进行导入-->
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("li:gt(5):not(:last)").hide();
// 给功能按钮绑定单击事件
$("div div a").click(function (){
// 让品牌显示隐藏切换
$("li:gt(5):not(:last)").toggle();
// 得到品牌的当前状态
// $("li:gt(5):not(:last)").is(":hidden")
if($("li:gt(5):not(:last)").is(":hidden")){
// 按钮上的文字：显示全部品牌，角标向下 showmore
$("div div a span").text("显示全部品牌");
// 先删除原有样式
$("div div").removeClass();
$("div div").addClass("showmore");
// 去掉高亮
$("li:contains('明基')").removeClass("promoted")
}else{
// 按钮上的文字：显示精简品牌，角标向上 showless
$("div div a span").text("显示精简品牌");
// 先删除原有样式
$("div div").removeClass();
$("div div").addClass("showless");
// 加高亮
$("li:contains('明基')").addClass("promoted")
}
return false;
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a>(5761) </li>
<li><a href="#">索尼</a>(5761) </li>
<li><a href="#">三星</a>(5761) </li>
<li><a href="#">尼康</a>(5761) </li>
<li><a href="#">松下</a>(5761) </li>
<li><a href="#">卡西欧</a>(5761) </li>
<li><a href="#">富士</a>(5761) </li>
<li><a href="#">柯达</a>(5761) </li>
<li><a href="#">宾得</a>(5761) </li>
<li><a href="#">理光</a>(5761) </li>
<li><a href="#">奥林巴斯</a>(5761) </li>
<li><a href="#">明基</a>(5761) </li>
<li><a href="#">爱国者</a>(5761) </li>
<li><a href="#">其他品牌相机</a>(5761) </li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
jQuery事件操作
-
$(function(){})和window.onload = function(){}的区别
- 执行顺序：
- jQuery页面加载完成之后先执行
- js页面加载完成后后执行
- 何时触发：
- jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行
- js页面加载完成除了要等页面的标签创建好DOM对象，还要等标签显示时需要的内容加载完成
- 执行次数：
- 原生js页面加载完成只会执行最后一次
- jQuery的页面加载完成会把全部的注册函数依次全部执行
- 执行顺序：
-
jQuery中其他的事件处理方法
-
click()
-
可以绑定和触发单击事件
-
传函数是绑定，不穿函数是触发事件
-
$("p").click(); $("p").click( function () { $(this).hide(); });
-
-
mouseover()
-
鼠标移入事件
-
$("p").mouseover(function(){ $("p").css("background-color","yellow"); });
-
-
mouseout()
-
鼠标移出事件
-
$("p").mouseout(function(){ $("p").css("background-color","#E9E9E4"); });
-
-
bind()
-
可以一次性绑定一个或多个事件
-
$('#foo').bind('mouseenter mouseleave', function() { $(this).toggleClass('entered'); });
-
-
one()
- 使用时和bind一样，但是绑定的事件只会响应一次
-
live()
- 用来绑定事件，可以用来绑定选择器匹配的所有元素的事件。包括后面动态创建出的
-
unbind()
- 和bind方法相反的操作，绑定之后，解除绑定
- 什么都不传，就全部解绑
-
-
事件的冒泡：
- 父子元素同时监听同一个事件时，当触发子元素事件时，同一个事件也被传递到父元素的事件里去响应
- 如何阻止事件冒泡？
- 在事件函数体内，return false可以阻止事件的冒泡传递
-
JS事件对象
- 封装有触发的事件信息的一个js对象
- 如何获取事件对象：
- 在给元素绑定事件时，在事件的function()的参数列表中添加一个参数，习惯取名为event。这个event即为ja传递事件处理函数的事件对象
- event.type，判断事件类型
实践5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片跟随</title>
<style type="text/css">
*{margin: 0; padding: 0}
body{text-align: center;}
#small{margin-top: 150px;}
#showBig{position: absolute;display: none;}
</style>
<!--使用jQuery要先导入jQuery-->
<!--由于没有下载jQuery的本地文件，所有使用了网址进行导入-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">
$(function (){
$("#small").bind("mouseover mouseout mousemove", function (event){
// alert("success");
if (event.type == "mouseover"){
console.log("mouseover");
$("#showBig").show();
}else if (event.type == "mouseout"){
console.log("mouseout");
$("#showBig").hide();
}else if (event.type == "mousemove"){
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
})
}
})
})
</script>
</head>
<body>
<img id="small" src="img/up.gif">
<div id="showBig">
<img src="img/down.gif">
</div>
</body>
</html>
扫一扫
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
