JavaScript jQuery Part.2
6 属性操作
(1) 设置或获取元素固有属性值
<1> 所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。
<2> 获取属性语法：$("选择器").prop("属性");
<3> 设置属性语法：$("选择器").prop("属性","属性值");
(2) 设置或获取元素自定义属性值
<1> 用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index="1"。
<2> 获取属性语法：$("选择器").attr("属性"); //类似原生getAttribute()
<3> 设置属性语法：$("选择器").attr("属性","属性值"); //类似原生setAttribute()
//该方法也可以获取H5自定义属性
(3) 数据缓存
<1> data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
//数据缓存data()，这个里面的数据是存放在元素的内存里面。
<2> 附加数据语法：data("name","value"); //向被选元素附加数据
<3> 获取数据语法：date("name"); //向被选元素获取数据
//该方法也可以读取HTML5自定义属性data-index，不用写data-，得到的是数字型。
(4) 购物车-购物车全选案例
<1> 需求分析
选中全选复选框，所有的小复选框都会被选中。
所有复选框被选中，则全选复选框也会被选中。
<2> 核心思路
里面3个小的复选框(j-checkbox)选中状态(checked)跟着全选复选框(checkall)走。
把全选复选框(checkall)的状态赋值给三个小复选框(j-checkbox)即可。
因为checked是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
当我们每次点击小复选框按钮，就来判断：如果小复选框被选中的个数等于所有小复选框的个数就应该把全选复选框选上，否则全选复选框不选。
:checked选择器：查找被选中的表单元素。
<3> 代码实现
//事件可以使用change
$(".checkall").change(function(){
// console.log($(this).prop("checked"));
//将全选复选框的选中状态赋值给小复选框。
$(".j-checkbox").prop("checked",$(this).prop("checked"));
});
$(".j-checkbox").change(function(){
//如果小复选框被选中的个数等于所有小复选框的个数。
//$(".j-checkbox").length是所有的小复选框的个数。
//$(".j-checkbox:checked").length是小复选框被选中的个数。
if($(".j-checkbox:checked").length === $(".j-checkbox").length){
//选中全选复选框选。
$(".checkall").prop("checked",true);
}else{
//不选中全选复选框选。
$(".checkall").prop("checked",false);
}
});
7 内容文本操作
//主要针对元素的内容还有表单的值操作
(1) 普通元素内容
//相当于原生innerHTML$("选择器").html(); //获取元素的内容$("选择器").html("内容"); //修改元素的内容
(2) 普通元素文本内容
//相当与原生innerText$("选择器").text(); //获取元素的文本内容$("选择器").text("内容"); //修改元素的文本内容
(3) 表单的值
//相当于原生value，主要针对元素的内容还有表单的值操作。$("选择器").val(); //获取元素的文本内容$("选择器").val("内容"); //修改元素的文本内容
(4) 购物车-增减商品数量案例
<1> 需求分析
点击加号，文本框中数字加1；点击减号，文本框中数字减1。
<2> 核心思路
首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后赋值给文本框。
只能增加本商品的数量，就是当前+号的兄弟文本框(itxt)的值。
//html中会有多个加号、文本框、减号的组合。
修改表单的值是val()方法。
这个变量初始值应该是这个文本框的值，在这个值的基础上++。
要获取表单的值减号(decrement)思路同理，但是如果文本框的值是1，就不能再减了。
<3> 代码实现
//块首先获取当前文本框中的值，当我们点击+号(increment)，就让这个值++，然后赋值给文本框。
$(".increment").click(function(){
//得到当前兄弟文本框的值。
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
});
$(".decrement").click(function(){
//得到当前兄弟文本框的值。
var n = $(this).siblings(".itxt").val();
if(n == 1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
});(5) 购物车-修改商品小计案例
<1> 需求分析
当商品数量发生变化，商品小计价格也随之变化。
<2> 核心思路
每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计。
只能增加本商品的小计，就是当前商品的小计模块(p-sum)。
//用户会购买多种商品，所以，html中会有多个商品的小计模块。
修改普通元素的内容是text()方法。
当前商品的价格，要把￥符号去掉，再相乘截取字符串substr(1)。
//商品价格格式为￥价格。
用户也可以直接修改表单里面的值，同样要计算小计。
//用表单change事件
用最新的表单内的值乘以单价即可但是还是当前商品小计。
<3> 代码实现
$(".increment").click(function(){
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
//小计功能模块
//根据文本框的值乘以当前商品的价格就是商品的小计。
//获取当前商品的价格p。
//var p = $(this).parent().parent().siblings(".p-price").html();
var p = $(this).parents(".p-sum").siblings(".p-price").html();
//parents(".p-sum")返回指定的祖先元素。
//把￥符号去掉。
p = p.substr(1);
$(this).parent().parent().siblings(".p-sum").html("￥"+ (p * n).toFixed(2));
//通过toFixed(2)方法，最后计算的结保留2位小数。
});
$(".decrement").click(function(){
var n = $(this).siblings(".itxt").val();
if(n == 1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
//小计功能模块
//根据文本框的值乘以当前商品的价格就是商品的小计。
//获取当前商品的价格p。
//var p = $(this).parent().parent().siblings(".p-price").html();
var p = $(this).parents(".p-sum").siblings(".p-price").html();
//parents(".p-sum")返回指定的祖先元素。
//把￥符号去掉。
p = p.substr(1);
$(this).parent().parent().siblings(".p-sum").html("￥"+ (p * n).toFixed(2));
//通过toFixed(2)方法，最后计算的结保留2位小数。
});
//用户修改文本框的值计算小计模块
$(".itxt").change(function(){
//先得到文本的里面的值乘以当前商品的单价。
var n = $(this).val();
//当前商品的单价。
var p = $(this).parents(".p-num").siblings(".p-price").html();
p = p.substr(1);
$(this).parents(".p-num").siblings(".p-sum").html("￥"+ (p * n).toFixed(2));
});
8 元素操作
//主要是遍历、创建、添加、删除元素操作
(1) 遍历元素
//jQuery隐式选代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
<1> 遍历元素
<1.1> 语法
$("选择器").each(function(index,domEle){
对元素的操作;
});<1.2> 参数index是每个元素的索引号。domEle是每个DOM元素对象，不是jquery对象。each()方法遍历匹配的每一个元素主要用DOM处理，所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)。
<2> 遍历数组、对象
<1.1> 语法
$.each(object,function(index,element){
对元素的操作;
});<1.2> 参数index是每个元素的索引号。element遍历内容。$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。
遍历数组时，index为数组的索引号，element为对应元素。
遍历对象时，index为对象的属性，element为对象属性的值。
<3> 购物车-计算总计和总额案例
<1.1> 需求分析
点击+号或-号，商品总计数量和价格总额会发生变化。
<1.2> 核心思路
把所有文本框里面的值相加就是总计数量。总额同理。
文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可。
点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额。
因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。
总计是文本框里面的值相加用val()总额是普通元素的内容用text()。
要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加。
<1.3> 代码实现
//用户点击+号，修改总计和总额。
$(".increment").click(function(){
//增减商品功能模块
//小计功能模块
getsum();
});
//用户点击-号，修改总计和总额。
$(".decrement").click(function(){
//增减商品功能模块
//小计功能模块
getsum();
});
//用户修改输入框，修改总计和总额。
$(".itxt").change(function(){
//小计功能模块
getsum();
});
function getsum(){
var count = 0; //计算总件数
var money = 0; //计算总价钱
$(".itxt").each(function(i,ele){
//遍历所有存放商品数量的元素，取出其中的值，转化为整形，相加。
count += parseInt($(ele).val());
});
//将存放商品总计的元素值内容设为count。
$(".amount-sum em").text(count);
$(".p-sum").each(function(i,ele){
//遍历所有存放商品价格的元素，取出其中的值，转化为浮点型，相加。
money += parseFloat($(ele).text().substr(1));
});
//将存放商品总额的元素值内容设为money。
$(".price-sumem").text("￥" + money.toFixed(2));
}(2) 创建元素
var element = $("元素标签");
//元素标签使用HTML。
(3) 添加元素
<1> 内部添加
//内部添加元素，生成之后，它们是父子关系。$("选择器").append(元素);
//把内容放入匹配元素内部最后面，类似原生appendChild。
<2> 外部添加
//外部添加元素，生成之后，他们是兄弟关系。$("选择器").after(元素);
//把内容放入目标元素后面。$("选择器").before(元素);
//把内容放入目标元素前面。
(4) 删除元素
$("选择器").remove(); //删除匹配的元素(自杀)。$("选择器").empty(); //清空匹配的元素集合中所有的子节点(杀死孩子)。$("选择器").html(); //清空匹配的元素集合中所有的子节点(杀死孩子)。
9 尺寸、位置操作
(1) 尺寸
<1> 语法
width()/height()：取得匹配元素宽度和高度值只算width/height。innerWidth()/ innerHieght()：取得匹配元素宽度和高度值包含padding。outerWidth()/outerHeight()：取得匹配元素宽度和高度值包含padding、border。outerWidth(true)/outerHeight(true)：取得匹配元素宽度和高度值包含padding、borde、margin。
<2> 参数
以上参数为空，则是获取相应值，返回的是数字型。
如果width()/height()参数为数字，则是修改相应值。
参数可以不必写单位。
(2) 位置
//位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
<1> 设置或获取元素偏移
$("选择器").offset().top/left;offset()方法设置或返回被选元素相对于文档(document)的偏移坐标，跟父级没有关系。
该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
可以设置元素的偏移：
offset({
top:10,
left:30
});<2> 获取元素偏移
$("选择器").position();position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
这个方法只能获取不能设置偏移。
<3> 设置或获取元素被卷去的头部和左侧
$("选择器").scrollTop();$("选择器").scrollLeft();scrollTop()方法设置或返回被选元素被卷去的头部。scrollLeft()方法设置或返回被选元素被卷去的左侧。
10 事件注册
(1) 单个事件注册
<1> 语法
$("选择器").事件(function(){
事件处理程序;
}); <2> 事件和原生基本一致，比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。
<3> 如果有的事件只想触发一次，可以使用one("事件类型",回调函数);来绑定事件。
(2) 多个事件注册
<1> 概述
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
<2> 语法
$("选择器").on("事件类型","子元素选择器",回调函数);
//子元素选择器为可选参数，当父元素事件委托给子元素时使用。
<3> 参数
事件类型:一个或多个用空格分隔的事件类型，如"click"或"keydown"。
子元素选择器:元素的子元素选择器。
回调函数:回调函数即绑定在素身上的侦听函数。
<4> 特点
<4.1> 可以绑定多个事件，多个处理事件处理程序。
$("选择器").on({
事件类型:function(),
事件类型:function(),
事件类型:function()
});<4.2> 如果事件处理程序相同。
$("选择器").on("mouseover mouseout",function(){
事件处理程序;
});<4.3> 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$("选择器").on("事件类型","子元素选择器",function(){
事件处理程序;
});在此之前有bind()，live()、delegate()等方法来处理事件绑定或者事件委派，最新原本的请用on替代他们。
<4.4> 动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。
(3) 解绑事件
//off()方法可以移除通过on()方法添加的事件处理程序。$("选择器").off();：解绑元素所有事件处理程序。$("选择器").off("事件类型");：解绑元素上面的事件类型的事件处理程序。$("选择器").off("事件类型","子元素选择器");：解绑事件委托。
(4) 自动触发事件
//有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必点击触发。$("选择器").事件类型();：第一种简写形，会触发元素的默认行为。$("选择器").trigger("事件类型");：第二种自动触发模式，会触发元素的默认行为。$("选择器").triggerHandler(type);：第三种自动触发模式，不会触发元素的默认行为。
(5) 事件对象
//事件被触发，就会有事件对象的产生。
<1> 语法
$("选择器").on(事件类型,function(event){
事件处理程序;
});<2> 阻止默认行为：event.preventDefault();或者return false;
<3> 阻止冒泡：event.stopPropagation();
11 其他方法
(1) 对象拷贝
<1> 概述
如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用 $.extend()方法。
<2> 语法
$.extend(深拷贝,所要拷贝对象,待拷贝对象1,待拷贝对象2);
<3> 参数
深拷贝：如果设为true为深拷贝，默认为false浅拷贝。
所要拷贝对象：要考贝的目标对象。
待拷贝对象1：待拷贝到第一个对象的对象。
待拷贝对象2：待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
深拷贝，前面加true，完全克隆拷贝的对象，(而不是地址)，修改目标对象不会影响被考贝对象。
(2) 多库共存
<1> 概述
jQuery使用$作为标示符，随着jQuery的流行其他js库也会用这$作为标识符，这样一起使用会引起冲突。
让Query和其他的库不存在冲突，可以同时存在，这就叫做多库共存。
<2> 多库共存
把里面的$符号统一改为jQuery。比如jQuery(div)。
jQuery变量规定新的名称：$.noConfict()var 变量名= $.noConflict();
(3) jQuery插件
<1> 概述
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
<2> 注意
这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。
<3> jQuery插件常用的网站
jQuery插件库：http://www.jq22.com/
jQuery之家：http://www.htmleaf.com/
<4> jQuery插件使用步骤
引入相关文件(jQuery文件和插件文件)。
复制相关html、css、js(调用插件)。
浙公网安备 33010602011771号