总结jQuery学习笔记-带你由浅入深学习jQuery（3）
2018-03-16 14:10
816 查看
JQUery 的属性操作
JQuery属性操作html() 可以获取/设置起始标签和结束标签中的内容,跟innerHTML一样。
text() 可以获取/设置起始标签和结束标签中的文本,跟innerText一样。
val() 它可以获取/设置表单项的value属性值,相当于.value属性值,还可以同时设置多个表单项的选中状态。
val 方法同时设置多个表单项的值示例代码：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// $(":radio").val(["radio2"]);
// $(":checkbox").val(["checkbox1","checkbox2","checkbox3"]);
// $("#multiple").val(["mul1","mul3"]);
// $("#single").val(["sin3"]);
//同时操作单选，复选，下拉，的选中
$(":radio,:checkbox,#multiple,#single").val(["checkbox1","radio2","mul2","checkbox2","sin2"]);
})
</script>
</head>
<body>
单选：
<input name="radio" type="radio" value="radio1" checked="checked"/>radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选：
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" checked="checked"/>checkbox3
<br/>
下拉多选 ：
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3" selected="selected">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选 ：
<select id="single">
<option value="sin1">sin1</option>
<
e346
;option value="sin2">sin2</option>
<option value="sin3" selected="selected">sin3</option>
</select>
</body>
</html>
attr() attr方法，可以设置/获取属性的值。
jquery官方并不推荐使用attr方法来操作那些属性值是true和false的属性。
attr方法，还可以操作一些html中非标签的属性。
prop() 是jquery官方推荐用来操作那些有true或false的两种值的属性。常用的就是checked和selected,disabled
那些值是true和false的属性，官方推荐使用prop来操作。
而其他的属性均使用attr来操作。
val 只能操作表单项的value属性。
attr 可以操作所有的属性。（官方不推荐拿它操作那些有true和false值的属性。Checked,selected,disabled这类属性），还可以操作那些非标准的属性。
prop 可以操作属性。但是只推荐操作那些有true和false值的属性。Checked,selected,disabled这类属性。
JQuery 练习
全选，全不选，反选<script type="text/javascript">
$(function(){
//全选单击事件
$("#checkedAllBtn").click(function(){
// jquery的方法 有链式编程 ，还有隐式遍历
// $("sss").add().add();
$(":checkbox").prop("checked",true);
});
//全不选单击事件
$("#checkedNoBtn").click(function(){
// jquery的方法 有链式编程 ，还有隐式遍历
// $("sss").add().add();
$(":checkbox").prop("checked",false);
});
//返选单击事件
$("#checkedRevBtn").click(function(){
// each 的function中有一个this对象。这个this对象是当前正在遍历到的dom对象
$("[name='items']").each(function(){
this.checked = !this.checked;
});
//应该判断一下是否是全部的球类都选中。如果全部的球类都选中，那么 【全选/全不选】复选框也应该被选中
// 全部球类的数量
var allCount = $("[name='items']").length;
var checkedCount = $("[name='items']:checked").length;
if (allCount == checkedCount) {
$("#checkedAllBox").prop("checked",true);
} else {
$("#checkedAllBox").prop("checked",false);
}
});
//提交单击事件
$("#sendBtn").click(function(){
// each 的function中有一个this对象。这个this对象是当前正在遍历到的dom对象
$("[name='items']:checked").each(function(){
alert(this.value);
});
});
//【全选/全不选 】单击事件
$("#checkedAllBox").click(function(){
// 在事件的function中，也有一个this对象。这个this对象是当前正在响应事件的dom对象
$("[name='items']").prop("checked",this.checked);
});
//全部球类的复选框单击事件
$("[name='items']").click(function(){
//获取全部球类的个数
var allCount = $("[name='items']").length;
// 获取选中的球类的个数
var checkedCount = $("[name='items']:checked").length;
// 比较是否全部球类都选中了，
if (allCount == checkedCount) {
// 如果全部球类都选中，设置【全选/全不选】选中，返之亦然
$("#checkedAllBox").prop("checked",true);
} else {
$("#checkedAllBox").prop("checked",false);
}
});
});
</script>Dom的增删改(待验证)内部插入：
appendTo() a.appendTo(b) 是把a追加到b的子元素后
prependTo() a.prependTo(b) 是把a插入到b的子元素前面
外部插入：
insertAfter() a.insertAfter(b) ba
insertBefore() a.insertBefore(b) ab
替换:
replaceWith() a.replaceWith(b) 把b替换a
replaceAll() a.replaceAll(b) 把a替换b
删除：
remove() a.remove(); 把a从html页面中删除
empty() a.empty() 清空a的子元素的文本
JQuery练习二
从左到右，从右到左练习<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//选中添加到右边
$("button:eq(0)").click(function(){
//获取左边下拉列表中选中的option标签对象
$("select:eq(0)option:selected").appendTo("select:eq(1)");
});
//全部添加到右边
$("button:eq(1)").click(function(){
$("select:eq(0) option").appendTo("select:eq(1)");
});
// 选中删除到左边
$("button:eq(2)").click(function(){
$("select:eq(1)option:selected").appendTo("select:eq(0)");
});
// 全部删除到左边
$("button:eq(3)").click(function(){
$("select:eq(1) option").appendTo("select:eq(0)");
});
});
</script>
</head>动态添加、删除表格记录<script type="text/javascript">
// 页面加载完成之后
$(function(){
var aDeleteFun = function(){
// return false可以阻止元素的默认行为
// 我们希望找到点击的a标签所在的行tr，然后删除remove();
// 在事件的function中有一个this对象。这个this对象是当前正在当前的事件的dom对象。
var $trObj = $(this).parent().parent();
var name = $trObj.find("td:first").html();
//提示用户操作
// 提示框函数。
// 这个函数接收的参数是提示框的提示内容
// 如果用户点击确定返回true,如果用户点击取消就返回false
if( confirm("你确定要删除【" + name + "】吗？") ){
$trObj.remove();
}
return false;
};
// 给删除绑定单击事件
$("a").click( aDeleteFun );
//$("a").live("click" , aDeleteFun ); 建议使用此种方式
//提交 按钮
$("#addEmpButton").click(function(){
var name = $("#empName").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=003'>Delete</a></td>"
+ "</tr>");
$trObj.find("a").click(aDeleteFun);//如果是用live就不用这条语句
$trObj.appendTo($("#employeeTable"));
});
});
</script>CSS样式操作。addClass() 它可以添加样式
removeClass() 可以删除样式
toggleClass() 切换添加和删除样式。（有就删除，没有就添加）
offset() 获取/设置元素的位置（坐标有left和top）
JQuery动画
基本动画
show() 显示隐藏的元素。
hide() 隐藏可见的元素。
toggle() 切换着调用隐藏和显示
淡入淡出动画
fadeIn() 淡入（慢慢可见）。
fadeOut() 淡出（慢慢不可见）。
fadeTo() 将元素在指定的时间内，慢慢的转换透明度到指定的值。
fadeToggle() 切换调用淡入和淡出
CSS_动画 品牌展示
需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌”
然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）<script type="text/javascript">
$(function() {
// 显示精简，和显示全部的按钮单击事件
var $liObjs = $("li:gt(5):not(:last)");
$liObjs.hide();
$("div div a").click(function(){
//1.我们点击按钮，如果品牌是可见，就隐藏，如果品牌不隐藏，就显示出来
if( $liObjs.is(":hidden") ) {
// 当前是隐藏状态，需要显示
$liObjs.show();
$("li:contains('爱国者'),li:contains('柯达')").addClass("promoted");
$("div a span").text("显示精简品牌");
$("div div").removeClass();
$("div div").addClass("showless");
} else {
// 当前是显示状态，需要隐藏
$liObjs.hide();
$("li:contains('爱国者')").removeClass("promoted");
$("div a span").text("显示全部品牌");
$("div div").removeClass();
$("div div").addClass("showmore");
}
//阻止a标签的默认行为
return false;
});
});
</script>
JQuery事件操作$(function(){});
和
window.onload =function(){}
的区别？
他们分别是在什么时候触发？
jquery的页面加载完成之后。是浏览器内核解析完html标签。然后创建好dom对象之后。调用jquery的页面加载完成之后。window.onload也是在浏览器内核解析完html标签。并且还要等页面中的元素加载（准备显示）完成就会调用。
他们触发的顺序？
先执行jquery的页面加载完成之后。再执行原生的window.onload的页面加载完成之后。
他们执行的次数？
window.onload只会执行最后一次的页面加载完成之后的函数jquery的页面加载完成之后。是根据注册事件的顺序，依次全部执行。
jquery中的事件相关的函数
click() 注册单击事件。触发单击事件。mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
mousemove() 鼠标移动事件
bind() bind可以给元素一次绑定多个事件。
one() 它可以给元素绑定只响应一次的事件
live() live可以给匹配选择器的元素注册事件。哪怕这个元素是后面创建的。
unbind() 是跟bind相反的操作。
事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
那么如何阻止事件冒泡呢？
在事件函数体内，return false; 可以阻止事件的冒泡传递。
javaScript事件对象
事件对象，是封装有触发的事件信息的一个javascript对象。
我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。
如何获取呢javascript事件对象呢？
在给元素绑定事件的时候，在事件的function(event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event就是javascript传递参事件处理函数的事件对象。
比如：//1.原生javascript获取 事件对象
window.onload = function(){
document.getElementById("areaDiv").onclick = function(event){
console.log(event);
}
}
//2.JQuery代码获取 事件对象
$("#areaDiv").click(function(event){
console.log(event);
});
//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function(event){
if ("mouseover" == event.type) {
console.log("鼠标移入");
} else {
console.log("鼠标移出");
}
});
07 事件 图片跟随
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove", function(event){
var x = event.pageX+10;
var y = event.pageY+10;
if(event.type=="mouseover"){
$("#showBig").show();
$("#showBig").offset({
top:y,
left:x
});
}else if(event.type=="mouseout"){
$("#showBig").hide();
}else if(event.type=="mousemove"){
$("#showBig").offset({
top:y,
left:x
});
}
});
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 总结jQuery学习笔记-带你由浅入深学习jQuery（2）
- 总结jQuery学习笔记-带你由浅入深学习jQuery（1）
- JQuery学习总结笔记1
- jQuery学习笔记总结
- 【JQuery学习笔记三】JQuery学习总结
- jquery总结--学习笔记（1）
- jQuery 基础学习笔记总结（一）
- jQuery学习笔记（三）：选择器总结
- jQuery学习笔记（三）：选择器总结
- Jquery学习笔记（3）：iScroll问题总结
- jquery学习笔记总结【重要】
- jQuery 基础学习笔记总结（一）
- jQuery学习笔记（三）：选择器总结
- jQuery学习笔记总结
- jQuery学习笔记1--基础总结
- jQuery学习笔记（七）_ jQuery核心总结
- jQuery快捷学习大总结 jQuery-1.3.2.js学习笔记
- JQuery基础学习总结
- iBatis2学习笔记：SqlMap的配置总结（18条）
- jquery学习笔记一