加强网站内容建设的意见,网站开发文档范例,怎么样做推广网站,wordpress微信付费一、 jQuery 属性操作 1. 元素固有属性值 prop() 获取属性#xff1a;prop(属性) 设置属性#xff1a;prop#xff08;属性#xff0c;属性值#xff09; 所谓元素固有属性就是元素本身自带的属性#xff0c;比如 a 元素里…一、 jQuery 属性操作 1. 元素固有属性值 prop() 获取属性prop(属性) 设置属性prop属性属性值 所谓元素固有属性就是元素本身自带的属性比如 a 元素里面的 href 比如 input 元素里面的 type。 注意 prop() 除了普通属性操作更适合操作表单属性disabled / checked / selected 等。 2 .元素自定义属性值 attr() 用户自己给元素添加的属性我们称为自定义属性。 比如给 div 添加 index “1”。 获取属性attr(属性) 类似原生getAttribute() 设置属性attr属性属性值类似原生setAttribute() 注意 attr() 除了普通属性操作更适合操作自定义属性。该方法也可以获取 H5 自定义属性 3 .数据缓存 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, 3);console.log($(div).attr(data-index));// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面$(span).data(uname, andy);console.log($(span).data(uname));// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型 3console.log($(div).data(index));})/script
/body二、jQuery 文本属性值 常见操作有三种html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性主要针对元素的内容还有表单的值操作。 1.普通元素内容html()相当于原生innerHTML html() //获取元素的内容 html(内容) //设置元素的内容 2.普通元素文本内容text()相当与原生innerText text() //获取元素的文本内容 text(文本内容) //设置元素的文本内容 3.表单的值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三、 jQuery 元素操作 jQuery 元素操作主要讲的是用jQuery方法操作标签的遍历、创建、添加、删除等操作。 1. 遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作就需要用到遍历。$(div).each(function(index,domEle) {xxx;}) 参数 ①each()方法遍历匹配的每一个元素主要用DOM处理。each每一个 ②里面的回调函数有2个参数index是每一个元素的索引号domEle是每个DOM元素对象不是jquery对象 ③所以要想使用jquery方法需要给这个dom元素转换为jquery对象$(domEle) 注意 此方法用于遍历 jQuery 对象中的每一项回调函数中元素为 DOM 对象想要使用 jQuery 方法需要转换。 $.each(object,function(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
/body2. 创建、添加、删除 jQuery方法操作元素的创建、添加、删除方法很多则重点使用部分如下 1创建$(li/li); //动态的创建了一个li 2内部添加element.append(“内容”) //把内容放入匹配元素内部最后面类似于原生appendChild element.prepend(“内容”) //把内容放入匹配元素内部最前面 3外部添加element.after(“内容”) //把内容放入目标元素后面 element.before(“内容”) //把内容放入目标元素前面 注意内部添加元素生成之后它们是父子关系 外部添加元素生成之后它们是兄弟关系 4删除元素element.remove()//删除匹配的元素本身 element.empty()//删除匹配的元素集合中所有的子节点 element.html()//清空匹配的元素内容 remove删除元素本身empty()和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
/body3.jQuery 尺寸、位置操作 jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API方便易用内容如下。 1 jQuery 尺寸操作jQuery 尺寸操作包括元素宽高的获取和设置且不一样的API对应不一样的盒子模型。
语法用法width() / height()取得匹配元素宽度和高度值 只算width / heightinnerWidth() / innerHeight()取得匹配元素宽度和高度值 包含paddingouterWidth() / outerHeight()取得匹配元素宽度和高度值 包含padding、borderouterWidth(true) / outerHeight(true)取得匹配元素宽度和高度值 包含padding、border、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() 等方法配合。
2 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()方法设置或返回被选元素被卷去的头部。不跟参数是获取参数为不带单位的数字则是设置被卷去的头部。
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
