JavaScript jQuery Part.2

所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type。 获取属性语法：$("选择器").prop("属性"); 设置属性语法：$("选择器").prop("属性","属性值");

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加index="1"。 获取属性语法：$("选择器").attr("属性"); //类似原生getAttribute() 设置属性语法：$("选择器").attr("属性","属性值"); //类似原生setAttribute()//该方法也可以获取H5自定义属性

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。//数据缓存data()，这个里面的数据是存放在元素的内存里面。 附加数据语法：data("name","value"); //向被选元素附加数据 获取数据语法：date("name"); //向被选元素获取数据//该方法也可以读取HTML5自定义属性data-index，不用写data-，得到的是数字型。

选中全选复选框，所有的小复选框都会被选中。所有复选框被选中，则全选复选框也会被选中。

里面3个小的复选框(j-checkbox)选中状态(checked)跟着全选复选框(checkall)走。把全选复选框(checkall)的状态赋值给三个小复选框(j-checkbox)即可。因为checked是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。当我们每次点击小复选框按钮，就来判断：如果小复选框被选中的个数等于所有小复选框的个数就应该把全选复选框选上，否则全选复选框不选。:checked选择器：查找被选中的表单元素。

//主要针对元素的内容还有表单的值操作

//相当于原生innerHTML$("选择器").html(); //获取元素的内容$("选择器").html("内容"); //修改元素的内容

//相当与原生innerText$("选择器").text(); //获取元素的文本内容$("选择器").text("内容"); //修改元素的文本内容

//相当于原生value，主要针对元素的内容还有表单的值操作。$("选择器").val(); //获取元素的文本内容$("选择器").val("内容"); //修改元素的文本内容

点击加号，文本框中数字加1；点击减号，文本框中数字减1。

首先声明一个变量，当我们点击+号(increment)，就让这个值++，然后赋值给文本框。只能增加本商品的数量，就是当前+号的兄弟文本框(itxt)的值。//html中会有多个加号、文本框、减号的组合。修改表单的值是val()方法。这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值减号(decrement)思路同理，但是如果文本框的值是1，就不能再减了。

当商品数量发生变化，商品小计价格也随之变化。

每次点击+号或者-号，根据文本框的值乘以当前商品的价格就是商品的小计。只能增加本商品的小计，就是当前商品的小计模块(p-sum)。//用户会购买多种商品，所以，html中会有多个商品的小计模块。修改普通元素的内容是text()方法。当前商品的价格，要把￥符号去掉，再相乘截取字符串substr(1)。//商品价格格式为￥价格。用户也可以直接修改表单里面的值，同样要计算小计。//用表单change事件用最新的表单内的值乘以单价即可但是还是当前商品小计。

//主要是遍历、创建、添加、删除元素操作

//jQuery隐式选代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法

参数index是每个元素的索引号。domEle是每个DOM元素对象，不是jquery对象。each()方法遍历匹配的每一个元素主要用DOM处理，所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)。

语法

参数index是每个元素的索引号。element遍历内容。$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。遍历数组时，index为数组的索引号，element为对应元素。遍历对象时，index为对象的属性，element为对象属性的值。

需求分析点击+号或-号，商品总计数量和价格总额会发生变化。 核心思路把所有文本框里面的值相加就是总计数量。总额同理。文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可。点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额。因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。总计是文本框里面的值相加用val()总额是普通元素的内容用text()。要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加。 代码实现

var element = $("元素标签");//元素标签使用HTML。

//内部添加元素，生成之后，它们是父子关系。$("选择器").append(元素);//把内容放入匹配元素内部最后面，类似原生appendChild。

//外部添加元素，生成之后，他们是兄弟关系。$("选择器").after(元素);//把内容放入目标元素后面。$("选择器").before(元素);//把内容放入目标元素前面。

$("选择器").remove(); //删除匹配的元素(自杀)。$("选择器").empty(); //清空匹配的元素集合中所有的子节点(杀死孩子)。$("选择器").html(); //清空匹配的元素集合中所有的子节点(杀死孩子)。

width()/height()：取得匹配元素宽度和高度值只算width/height。innerWidth()/ innerHieght()：取得匹配元素宽度和高度值包含padding。outerWidth()/outerHeight()：取得匹配元素宽度和高度值包含padding、border。outerWidth(true)/outerHeight(true)：取得匹配元素宽度和高度值包含padding、borde、margin。

以上参数为空，则是获取相应值，返回的是数字型。如果width()/height()参数为数字，则是修改相应值。参数可以不必写单位。

//位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

$("选择器").offset().top/left;offset()方法设置或返回被选元素相对于文档(document)的偏移坐标，跟父级没有关系。该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。可以设置元素的偏移：

$("选择器").position();position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。这个方法只能获取不能设置偏移。

$("选择器").scrollTop();$("选择器").scrollLeft();scrollTop()方法设置或返回被选元素被卷去的头部。scrollLeft()方法设置或返回被选元素被卷去的左侧。

语法

事件和原生基本一致，比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。 如果有的事件只想触发一次，可以使用one("事件类型",回调函数);来绑定事件。

on()方法在匹配元素上绑定一个或多个事件的事件处理函数。

$("选择器").on("事件类型","子元素选择器",回调函数);//子元素选择器为可选参数，当父元素事件委托给子元素时使用。

事件类型:一个或多个用空格分隔的事件类型，如"click"或"keydown"。子元素选择器:元素的子元素选择器。回调函数:回调函数即绑定在素身上的侦听函数。

可以绑定多个事件，多个处理事件处理程序。

如果事件处理程序相同。

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

在此之前有bind()，live()、delegate()等方法来处理事件绑定或者事件委派，最新原本的请用on替代他们。 动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。

//off()方法可以移除通过on()方法添加的事件处理程序。$("选择器").off();：解绑元素所有事件处理程序。$("选择器").off("事件类型");：解绑元素上面的事件类型的事件处理程序。$("选择器").off("事件类型","子元素选择器");：解绑事件委托。

//有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必点击触发。$("选择器").事件类型();：第一种简写形，会触发元素的默认行为。$("选择器").trigger("事件类型");：第二种自动触发模式，会触发元素的默认行为。$("选择器").triggerHandler(type);：第三种自动触发模式，不会触发元素的默认行为。

//事件被触发，就会有事件对象的产生。

语法

阻止默认行为：event.preventDefault();或者return false; 阻止冒泡：event.stopPropagation();

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用 $.extend()方法。

$.extend(深拷贝,所要拷贝对象,待拷贝对象1,待拷贝对象2);

深拷贝：如果设为true为深拷贝，默认为false浅拷贝。所要拷贝对象：要考贝的目标对象。待拷贝对象1：待拷贝到第一个对象的对象。待拷贝对象2：待拷贝到第N个对象的对象浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。深拷贝，前面加true，完全克隆拷贝的对象，(而不是地址)，修改目标对象不会影响被考贝对象。

jQuery使用$作为标示符，随着jQuery的流行其他js库也会用这$作为标识符，这样一起使用会引起冲突。让Query和其他的库不存在冲突，可以同时存在，这就叫做多库共存。

把里面的$符号统一改为jQuery。比如jQuery(div)。jQuery变量规定新的名称：$.noConfict()var 变量名= $.noConflict();

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。

这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。

jQuery插件库：http://www.jq22.com/jQuery之家：http://www.htmleaf.com/

引入相关文件(jQuery文件和插件文件)。复制相关html、css、js(调用插件)。