做搜狗网站点,wordpress适用于图片站的主题,wordpress建多个首页,学电商设计大概多少钱jQuery 属性、元素、尺寸和位置
代码下载
jQuery 属性操作
jQuery 常用属性操作有三种#xff1a;prop() / attr() / data() ;
元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性#xff0c;比如 元素里面的 href #xff0c;比如 元素里面的 type。
语…jQuery 属性、元素、尺寸和位置
代码下载
jQuery 属性操作
jQuery 常用属性操作有三种prop() / attr() / data() ;
元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性比如 元素里面的 href 比如 元素里面的 type。
语法
获取属性语法
prop(属性);设置属性语法
prop(属性, 属性值);注意prop() 除了普通属性操作更适合操作表单属性disabled / checked / selected 等。 元素自定义属性值 attr()
用户自己给元素添加的属性我们称为自定义属性。 比如给 div 添加 index “1”。
语法
获取属性语法
attr(属性) // 类似原生 getAttribute()设置属性语法
attr(属性, 属性值) // 类似原生 setAttribute()注意attr() 除了普通属性操作更适合操作自定义属性。该方法也可以获取 H5 自定义属性 数据缓存 data()
data() 方法可以在指定的元素上存取数据并不会修改 DOM 元素结构。一旦页面刷新之前存放的数据都将被移除。
语法
附加数据语法
data(name,value); // 向被选元素附加数据获取数据语法
data(name); // 向被选元素获取数据注意同时还可以读取 HTML5 自定义属性 data-index 得到的是数字型。 演示代码
bodya hrefhttp://www.itcast.cn title都挺好都挺好/ainput typecheckbox name id checkeddiv index1 data-index2我是div/divspan123/spanscript$(function() {//1. element.prop(属性名) 获取元素固有的属性值console.log($(a).prop(href));$(a).prop(title, 我们都挺好);$(input).change(function() {console.log($(this).prop(checked));});// console.log($(div).prop(index));// 2. 元素的自定义属性 我们通过 attr()console.log($(div).attr(index));$(div).attr(index, 4);console.log($(div).attr(data-index));// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面$(span).data(uname, andy);console.log($(span).data(uname));// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型console.log($(div).data(index));})/script
/body购物车案例模块-全选案例 全选思路里面3个小的复选框按钮j-checkbox选中状态checked跟着全选按钮checkall走。因为checked 是复选框的固有属性此时我们需要利用prop()方法获取和设置该属性。把全选按钮状态赋值给3小复选框就可以了。当我们每次点击小的复选框按钮就来判断如果小复选框被选中的个数等于3 就应该把全选按钮选上否则全选按钮不选。:checked 选择器 :checked 查找被选中的表单元素。 // 全选案例$(.checkall).change(function() {$(.j-checkbox, .checkall).prop(checked, $(this).prop(checked));if ($(this).prop(checked)) {$(.cart-item).addClass(check-cart-item);} else {$(.cart-item).removeClass(check-cart-item);}});$(.j-checkbox).change(function() {if ($(this).prop(checked)) {$(this).parents(.cart-item).addClass(check-cart-item);} else {$(this).parents(.cart-item).removeClass(check-cart-item);}if ($(.j-checkbox:checked).length $(.j-checkbox).length) {$(.checkall).prop(checked, true);} else {$(.checkall).prop(checked, false);}})jQuery 文本属性值
jQuery的文本属性值常见操作有三种html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
jQuery内容文本值
常见操作有三种html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性主要针对元素的内容还有表单的值操作。
语法
普通元素内容 html()( 相当于原生inner HTML)
html(); // 获取元素的内容
html(内容); // 设置元素的内容普通元素文本内容 text() (相当与原生 innerText)
text(); // 获取元素的文本内容
text(文本内容); // 设置元素的文本内容表单的值 val()( 相当于原生value)
val(); // 获取表单的值
val(内容); // 设置表单的值注意html() 可识别标签text() 不识别标签。 演示代码
bodydivspan我是内容/span/divinput typetext value请输入内容script// 1. 获取设置元素内容 html()console.log($(div).html());// $(div).html(123);// 2. 获取设置元素文本内容 text()console.log($(div).text());$(div).text(123);// 3. 获取设置表单值 val()console.log($(input).val());$(input).val(123);/script
/body购物车案例模块-增减商品数量案例 核心思路首先声明一个变量当我们点击号increment就让这个值然后赋值给文本框。注意1 只能增加本商品的数量 就是当前号的兄弟文本框itxt的值。修改表单的值是val() 方法注意2 这个变量初始值应该是这个文本框的值在这个值的基础上。要获取表单的值减号decrement思路同理但是如果文本框的值是1就不能再减了。 购物车案例模块-修改商品小计案例 核心思路每次点击号或者-号根据文本框的值 乘以 当前商品的价格 就是 商品的小计注意1 只能增加本商品的小计 就是当前商品的小计模块p-sum修改普通元素的内容是text() 方法注意2 当前商品的价格要把符号去掉再相乘 截取字符串 substr(1)parents(‘选择器’) 可以返回指定祖先元素最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法用户也可以直接修改表单里面的值同样要计算小计。 用表单change事件用最新的表单内的值 乘以 单价即可 但是还是当前商品小计 // 增减商品数量与小计案例$(.increment).click(function() {let n parseInt($(this).siblings(.itxt).val());n;$(this).siblings(.itxt).val(n);var p $(this).parents(.p-num).siblings(.p-price).html().substr(1);$(this).parents(.p-num).siblings(.p-sum).html( (p*n).toFixed(2));});$(.decrement).click(function() {let n parseInt($(this).siblings(.itxt).val());if (n 1) {n--;$(this).siblings(.itxt).val(n);var p $(this).parents(.p-num).siblings(.p-price).html().substr(1);$(this).parents(.p-num).siblings(.p-sum).html( (p*n).toFixed(2));}});jQuery 元素操作
jQuery 元素操作主要讲的是用jQuery方法操作标签的遍历、创建、添加、删除等操作。
遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作就需要用到遍历。
语法1
$(div).each(function (index, domEle) { xxx; })each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象不是jquery对象 所以要想使用jquery方法需要给这个dom元素转换为jquery对象 $(domEle) 注意此方法用于遍历 jQuery 对象中的每一项回调函数中元素为 DOM 对象想要使用 jQuery 方法需要转换。 语法2
$.each(objectfunction (index, element) { xxx; })$.each()方法可用于遍历任何对象。主要用于数据处理比如数组对象里面的函数有2个参数: index 是每个元素的索引号; element 遍历内容 注意此方法用于遍历 jQuery 对象中的每一项回调函数中元素为 DOM 对象想要使用 jQuery 方法需要转换。 演示代码
bodydiv1/divdiv2/divdiv3/divscript$(function() {// 如果针对于同一类元素做不同操作需要用到遍历元素类似for但是比for强大var sum 0;var arr [red, green, blue];// 1. each() 方法遍历元素 $(div).each(function(i, domEle) {// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称// console.log(i);// 回调函数第二个参数一定是 dom 元素对象也是自己命名// console.log(domEle); // 使用jQuery方法需要转换 $(domEle)$(domEle).css(color, arr[i]);sum parseInt($(domEle).text());})console.log(sum);// 2. $.each() 方法遍历元素 主要用于遍历数据处理数据// $.each($(div), function(i, ele) {// console.log(i);// console.log(ele);// });// $.each(arr, function(i, ele) {// console.log(i);// console.log(ele);// })$.each({name: andy,age: 18}, function(i, ele) {console.log(i); // 输出的是 name age 属性名console.log(ele); // 输出的是 andy 18 属性值})})/script
/body案例购物车案例模块-计算总计和总额 把所有文本框中的值相加就是总额数量总计同理。文本框里面的值不同如果想要相加需要用 each() 遍历声明一个变量做计数器累加即可。 // 计算总计和总额案例function sum() {var n 0;$(.itxt).each(function(i, d) {n parseInt($(d).val());});$(.amount-sum em).html(n);console.log(n);var amount 0;$(.p-sum).each(function(i, d) {amount parseFloat($(d).html().substr(1));});$(.price-sum em).html( amount.toFixed(2));}sum();创建、添加、删除
jQuery方法操作元素的创建、添加、删除方法很多则重点使用部分如下
创建元素语法:
$(li/li); //动态的创建了一个 li内部添加语法:
element.append(内容); //把内容放入匹配元素内部最后面类似原生 appendChild。
element.prepend(内容); //把内容放入匹配元素内部最前面。外部添加语法:
element.after(内容); // 把内容放入目标元素后面
element.before(内容); // 把内容放入目标元素前面1 内部添加元素生成之后它们是父子关系。 2 外部添加元素生成之后他们是兄弟关系。
删除元素语法:
element.remove(); // 删除匹配的元素(本身)
element.empty(); // 删除匹配的元素集合中所有的子节点
element.html(); // 清空匹配的元素内容1 remove 删除元素本身。 2 empt() 和 html(‘’) 作用等价都可以删除元素里面的内容只不过 html 还可以设置内容。 注意以上只是元素的创建、添加、删除方法的常用方法其他方法请参详API。 案例代码
bodyulli原先的li/li/uldiv classtest我是原先的div/divscript$(function() {// 1. 创建元素var li $(li我是后来创建的li/li);// 2. 添加元素// 2.1 内部添加// $(ul).append(li); 内部添加并且放到内容的最后面 $(ul).prepend(li); // 内部添加并且放到内容的最前面// 2.2 外部添加var div $(div我是后妈生的/div);// $(.test).after(div);$(.test).before(div);// 3. 删除元素// $(ul).remove(); 可以删除匹配的元素 自杀// $(ul).empty(); // 可以删除匹配的元素里面的子节点 孩子$(ul).html(); // 可以删除匹配的元素里面的子节点 孩子})/script
/body购物车案例模块-删除商品案例 核心思路把商品remove() 删除元素即可有三个地方需要删除 1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车商品后面的删除按钮 一定是删除当前的商品所以从 $(this) 出发删除选中的商品 先判断小的复选框按钮是否选中状态如果是选中则删除对应的商品清理购物车 则是把所有的商品全部删掉 // 删除商品案例$(.p-action).click(function() {$(this).parent().remove();sum();});$(.remove-batch).click(function() {$(.j-checkbox:checked).parents(.cart-item).remove();sum();});$(.clear-all).click(function() {$(.cart-item).remove();sum();});jQuery 尺寸、位置操作
jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API方便易用内容如下。
jQuery 尺寸操作
jQuery 尺寸操作包括元素宽高的获取和设置且不一样的API对应不一样的盒子模型。
语法
语法用法width() / height()取得匹配元素宽度和高度值 只算 width / heightinnerWidth() / innerHieght()取得匹配元素宽度和高度值 包含 paddingouterWidth() / outerHeight()取得匹配元素宽度和高度值 包含 padding 、borderouterWidth(true) / outerHeight(true)取得匹配元素宽度和高度值 包含 padding、borde、margin
以上参数为空则是获取相应值返回的是数字型。如果参数为数字则是修改相应值。参数可以不必写单位。
代码演示
bodydiv/divscript$(function() {// 1. width() / height() 获取设置元素 width和height大小 console.log($(div).width());// $(div).width(300);// 2. innerWidth() / innerHeight() 获取设置元素 width和height padding 大小 console.log($(div).innerWidth());// 3. outerWidth() / outerHeight() 获取设置元素 width和height padding border 大小 console.log($(div).outerWidth());// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height padding border marginconsole.log($(div).outerWidth(true));})/script
/body注意有了这套 API 将可以快速获取和子的宽高至于其他属性想要获取和设置还要使用 css() 等方法配合。
jQuery 位置操作
jQuery的位置操作主要有三个 offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:
offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标跟父级没有关系。该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离offset().left 用于获取距离文档左侧的距离。可以设置元素的偏移:offset({ top: 10, left: 30 });
position() 获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标如果父级都没有定位则以文档为准。该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离position().left 用于获取距离定位父级左侧的距离。该方法只能获取。
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop() 方法设置或返回被选元素被卷去的头部。不跟参数是获取参数为不带单位的数字则是设置被卷去的头部。
案例带有动画的返回顶部 核心原理 使用animate动画返回顶部。animate动画函数里面有个scrollTop 属性可以设置位置但是是元素做动画因此 $(“body,html”).animate({scrollTop: 0}) bodydiv classfatherdiv classson/div/divdiv classback返回顶部/divdiv classcontainer/divscript$(function() {// 1. 获取设置距离文档的位置偏移 offsetconsole.log($(.son).offset());console.log($(.son).offset().top);// $(.son).offset({// top: 200,// left: 200// });// 2. 获取距离带有定位父级位置偏移 position 如果没有带有定位的父级则以文档为准// 这个方法只能获取不能设置偏移console.log($(.son).position());// $(.son).position({// top: 200,// left: 200// });// 3. 被卷去的头部$(document).scrollTop(100);// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()// 页面滚动事件var boxTop $(.container).offset().top;$(window).scroll(function() {// console.log(11);console.log($(document).scrollTop());if ($(document).scrollTop() boxTop) {$(.back).fadeIn();} else {$(.back).fadeOut();}});// 返回顶部$(.back).click(function() {// $(document).scrollTop(0);$(body, html).stop().animate({scrollTop: 0});// $(document).stop().animate({// scrollTop: 0// }); 不能是文档而是 html和body元素做动画})})/script
/body案例 电梯导航上 当我们滚动到 今日推荐 模块就让电梯导航显示出来点击电梯导航页面可以滚动到相应内容区域核心算法因为电梯导航模块和内容区模块一一对应的当我们点击电梯导航某个小模块就可以拿到当前小模块的索引号就可以把animate要移动的距离求出来当前索引号内容区模块它的offset().top然后执行动画即可 案例电梯导航下 当我们点击电梯导航某个小li 当前小li 添加current类兄弟移除类名当我们页面滚动到内容区域某个模块 左侧电梯导航相对应的小li模块也会添加current类 兄弟移除current类。触发的事件是页面滚动因此这个功能要写到页面滚动事件里面。需要用到each遍历内容区域大模块。 each里面能拿到内容区域每一个模块元素和索引号判断的条件 被卷去的头部 大于等于 内容区域里面每个模块的offset().top就利用这个索引号找到相应的电梯导航小li添加类。 $(function() {let toolTop $(.recommend).offset().top;let flag true;function toggleTool() {if ($(document).scrollTop() toolTop) {$(.fixedtool).css(display, block);} else {$(.fixedtool).css(display, none);}if (flag) {$(.floordiv).each(function(i, o) {if ( $(document).scrollTop() $(o).offset().top) {console.log(i);$(.fixedtool li).eq(i).addClass(current).siblings().removeClass();}}) }}toggleTool();$(document).scroll(function() {toggleTool();});$(.fixedtool li).click(function() {flag false;$(this).addClass(current).siblings().removeClass();let t $(.floordiv).eq($(this).index()).offset().top;$(html, body).stop().animate({scrollTop: t,}, normal, function() { console.log(flag);flag true; });});
});
