04_jQuery操作元素的属性与样式
jquery】常用的jquery获取表单对象的属性与值
jquery】常⽤的jquery获取表单对象的属性与值1【jquery】常⽤的jquery获取表单对象的属性与值234 1、JQuery的概念56789 JQuery是⼀个JavaScript的类库，这个类库集合了很多功能⽅法，利⽤类库你可以⽤⼀些简单的代码实现⼀些复杂的JS效果。
101112 2、JQuery实现了代码的分离1314不⽤再⽹页中加⼊如：onclick之类的事件来调⽤函数了，直接引⼊JQuery类库和⾃⼰编写的JQuery代码就可以了；15如：16 $(function(){17 $("Element").click{function(){18 alert("点击我哦！");19 }20 }21 })；22上⾯的代码中只要定义了Element 这个元素后⾯的click是动作2324 alert("点击我哦！");这个是要执⾏的代码，当然你可以有很多的操作在这个函数中；25这⾥⾯的$这个号代表JQuery的意思，就是引⽤类库。
2627 3、JQuery的核⼼的⼀些⽅法28 each(callback) '就像循环29 $("Element").length; ‘元素的个数，是个属性30 $("Element").size(); ’也是元素的个数，不过带括号是个⽅法31 $("Element").get(); ‘某个元素在页⾯中的集合，以数组的形式存储32 $("Element").get(index); ’功能和上⾯的相同，index表⽰第⼏个元素，数组的下标33 $("Element").get().reverse(); ‘把得到的数组⽅向34 ("Element1").index(("Element1").index(("Element2")); ’元素2在元素1中的索引值是。
用jQuery操作元素的属性与样式
用jQuery操作元素的属性与样式用jQuery操作元素的属性与样式元素属性和Dom属性对于下面这样一个标签元素:<img id='img' src="1.jpg" alt='1' class="imgs"></img>我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性.元素属性和Dom属性只是在我们对其进行不同解析时的不同称呼.值得注意的是:1.元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称.例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className2.在JavaScript中,我们可以直接获取或设置Dom属性使用jQuery操作元素属性在jQuery中,提供了attr函数来操作元素属性,具体如下:函数名说明例子attr(name) 取得第一个匹配元素的属性值. $("input").attr("value")attr(property) 将一个"名/值"形式的对象设置为所有匹配元素的属性$("input").attr({ value: "txt", title: "text" }); attr(key,value) 为所有匹配的元素设置一个属性值$("input").attr("value","txt");attr(key,fn) 为所有匹配的元素设置一个计算的属性值$("input").attr("title", function () { returnthis.value });removeAttr(name) 从所有匹配的元素中删除一个属性$("input").removeAttr("value");注意:1.如果要设置对象的class属性时,必须使用className作为属性名.2.我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值:$("#txt1").attr("value")$("#txt1").attr("value", "1234");$("#dv1").attr("innerHTML", 'this is a div'); $("#dv1").attr("innerHTML");实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下:函数名说明例子val() 获取第一个匹配元素的value值$("#txt1").val()val(val) 为匹配的元素设置value值$("#txt1").val("txt1")html() 获取第一个匹配元素的html内容$("#dv1").html()html(val) 设置每一个匹配的元素的html内容$("#dv1").html("this is a div")text() 取得所有匹配文本节点的内容,并将其连接起来$("div").text()text(val) 将所有匹配元素的置为val $("div").text("divs")使用jQuery操作CSS1.修改CSS类函数名说明例子addClass(classes) 为每个匹配的元素添加指定的类名$("input").addClass("colorRed borderBlack"); hasClass(class) 判断匹配元素集合中是否至少有一个包含了指定的css类,如果有一个含有指定css类,则返回truealert($("input").hasClass("borderBlack")); removeClass([classes]) 从匹配元素中移除所有或指定的css类$("input").removeClass("colorRed borderBlack");toggleClass(classes) 如果存在(不存在)就删除(添加)指定类$("input").toggleClass("colorRed borderBlack");toggleClass(classes,switch) 当switch是true时,添加类,switch为false时,删除类$("input").toggleClass("colorRed borderBlack", true);注意:1.addClass、removeClass、toggleClass均可添加多个类,多个类之间用空格隔开2.removeClass方法的参数可选,如果有参数,则删除指定class,如果无参数,则删除匹配元素的所有class3.在调用toggleClass(classes,switch)时,我们可以有更多的用法,例如://每当按钮被点击三次时,添加样式var i = 0;$("#btn").click(function () {$("input").toggleClass("colorRed borderBlack", true);});2.修改CSS样式函数名说明例子css(name) 访问第一个匹配元素的样式属性$("input").css("color")css(properties) 把一个"名/值"对设置给所有匹配元素的样式属性$("input").css({border:"solid 3pxsilver",color:"red"})css(name,value) 为匹配的元素设置同一个样式属性如果是数字,将自动转换为像素值$("input").css("border-width","5");注意:对于样式值为数字的代码示例及结果:示例生成的源码$("input").css("border-width","5");<input style="BORDER-RIGHT-WIDTH: 5px;BORDER-TOP-WIDTH: 5px;BORDER-BOTTOM-WIDTH: 5px;BORDER-LEFT-WIDTH: 5px"id="txt1" />注意:对于一些常用的属性,例如width,height之类,使用attr("width")和css("width")是无法正常获取其值的,现在,我们来介绍一些常用的属性.获取常用的属性1.宽、高相关函数名说明例子width() 获取第一个匹配元素的宽度,默认为px $("#txt1").width()width(val) 为匹配的元素设置宽度值,默认为px$("#txt1").width(200)height() 获取第一个匹配元素的高度,默认为px$("#txt1").height()height(val) 为匹配的元素设置宽度值,默认为px$("#txt1").height(20)innerWidth() 获取第一个匹配元素内部区域宽度(包括padding,不包括border)$("#txt1").innerWidth()innerHeight() 获取第一个匹配元素内部区域高度(包括padding,不包括border)$("#txt1").innerHeight()outerWidth([margin]) 获取第一个匹配元素外部区域宽度(包括padding,border)margin为true则包括margin,否则不包括$("#txt1").outerWidth()outerHeight([margin]) 获取第一个匹配元素外部区域高度(包括padding,border)margin为true则包括margin,否则不包括$("#txt1").outerHeight(true)注意:返回的高度、宽度均为数字,不带px参照一张图,会更容易理解些.2.位置相关在设计一些弹出对象的脚本中,经常需要动态获取弹出坐标并且设置元素的位置.jQuery为我们提供了位置相关的各个函数.函数名说明例子offset() 获取匹配元素在当前窗口的相对偏移只对可见元素有效$("#btn").offset().top$("#btn").offset().leftposition() 获取匹配元素相对父元素的偏移只对可见元素有效$("#btn").position().top$("#btn").position().leftscrollTop() 获取匹配元素相对滚动条顶部的偏移对可见元素和隐藏元素均有效$("div").scrollTop()scrollTop(val) 设置垂直滚动条顶部偏移为该值对可见元素和隐藏元素均有效$("div").scrollTop(200)scrollLeft() 获取匹配元素相对滚动条左部的偏移对可见元素和隐藏元素均有效$("div").scrollLeft()scrollLeft(val) 设置水平滚动条左侧的偏移对可见元素和隐藏元素均有效$("div").scrollLeft(200)注意:offset方法是相对于当前窗口的相对偏移,而position方法是相对于父元素的偏移--选自《从零开始学习jQuery》。
jquery用法
jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。
下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。
以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。
以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。
以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。
jQuery的属性,事件及操作
jQuery的属性,事件及操作1.属性操作1.1 基本属性操作$("img").attr("src") 返回⽂档中所有图像的src属性值$("img").attr("src","test.jpg") 设置⽂档中所有图像的src属性值$("img").removeAttr("src") 将⽂档中图像的src属性删除$("input[type='checkbox']").prop("checked",true) 选中复选框$("input[type='checkbox']").prop("checked",false) 取消复选框$("img").removeProp("src") 删除img的src属性值attr与prop的区别:attr可以找到⾃定义的属性,prop只能找到固有的属性例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><button class="select_all">全选</button><button class="reverse">反选</button><button class="cancel">取消</button><hr><table border="1"><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox"></td><td>111</td><td>222</td><td>333</td></tr></table><script>//为"select_all"类绑定点击事件$(".select_all").click(function(){$(":checkbox").prop("checked",true);//选中所有的"checkbox"标签});//为"cancel"类绑定点击事件$(".cancel").click(function(){$(":checkbox").prop("checked",false);//取消选中的"checkbox"标签});//为"reverse"类绑定点击事件$(".reverse").click(function(){//循环每⼀个"checkbox"标签$(":checkbox").each(function(){$(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反})});</script></body></html>1.2 class属性操作$("p").addClass("test") 为p元素加上"text"类$("p").removeClass("test") 从p元素中删除"test"类$("p").toggleClass("test") 如果存在就删除,否则就添加"test"类$("p").hasClass("test") 判断有没有"test",返回⼀个布尔值1.3 标签⽂本text/HTML的属性$("p").html() 返回p标签的html内容$("p").html("hello world") 设置p标签的html内容$("p").text() 返回p标签的text内容$("p").text("test") 设置p标签的text内容$("input").val() 获取⽂本框中的值$("input").val("test") 设置⽂本框中的内容2.CSS操作2.1 样式$("p").css("color") 访问查看p元素的color属性$("p").css("color","red") 设置p元素的color属性的"red"$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要⽤{}字典形式) 2.2 位置$("p").offset() 元素在当前窗⼝的相对偏移,object{top:100,left:100}$("p").offset().top 元素相对窗⼝顶部的偏移$("p").offset().left 元素相对窗⼝左侧的偏移$("p").position() 元素相对⽗元素的偏移,对可见元素有效,object{top:100,left:100}例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script><style type="text/css">*{margin:0;padding:0;}</style></head><body><div class="div1" style="width:200px;height:200px;background-color:darkblue"></div><script>var val_x=0;//初始化标签到浏览器左边框的距离var val_y=0;//初始化标签到浏览器上边框的距离//定义当⿏标悬浮在标签上⾯的时候,⿏标的样式为移动$(".div1").mouseover(function(){$(this).css("cursor","move")});//为盒⼦绑定⿏标左键按下事件$(".div1").mousedown(function(e){val_x=e.clientX;//定义标签的初始x坐标val_y=e.clientY;//定义标签的初始y坐标var $box_x=$(".div1").offset().left;//获取盒⼦相对窗⼝左侧的偏移var $box_y=$(".div1").offset().top;//获取盒⼦相对窗⼝顶侧的偏移//定义⿏标移动的操作$(document).mousemove(function(e){var move_x=e.clientX;//获取⿏标的偏移量var move_y=e.clientY;//移动窗⼝到指定的偏移量$(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})});//绑定⿏标左键松开事件$(document).mouseup(function(){$(document).off();//关闭事件})});</script></body></html>这样可以使div盒⼦跟随⿏标的移动⽽移动$(window).scrollTop() 获取窗⼝滚动条的⾼度$(window).scrollLeft() 获取窗⼝滚动条的宽度$(window).scrollTop("100") 获取窗⼝滚动条的⾼度为100例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><div class="box"></div><div id="returnTop">to top</div><script>//定义窗⼝的滚动条$(window).scroll(function(){console.log($(window).scrollTop());//打印滚动条的位置//当滚动条的位置⼤于200的时候if($(window).scrollTop()>200){$("#returnTop").show();//显⽰滚动条}else{$("#returnTop").hide();//隐藏滚动条}//为返回顶部按钮绑定点击事件$("#returnTop").click(function(){$(window).scrollTop(0);//使窗⼝返回顶部})})</script></body></html>2.3 尺⼨$("p").height() 获取p元素的⾼度$("p").width() 获取p元素的宽度$("p:first").innerHeight() 获取p元素的第⼀个元素的内部区域的⾼度(不包括边框) $("p:first").innerWidth() 获取p元素的第⼀个元素的内部区域宽度(不包括边框)$("p:first").outerHeight() 获取p元素的第⼀个元素的外部区域的⾼度(默认包括边框) $("p:first").outerWidth() 获取p元素的第⼀个元素的外部区域的宽度(默认包括边框) $("p:first").outerHeight(true) 为true时包括边框例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script><style>.box{width:200px;height:100px;padding:50px;border:10px solid red;background-color:pink;margin:20px;}</style></head><body><div class="box">DIV</div><script>console.log($(".box").height());//获取盒⼦的⾼度console.log($(".box").width());//获取盒⼦的宽度console.log($(".box").innerHeight());//获取盒⼦的内部区域的⾼度(包括填充)console.log($(".box").innerWidth());//获取盒⼦的内部区域的宽度(包括填充)console.log($(".box").outerHeight());//获取盒⼦的外部区域的⾼度(包括边框)console.log($(".box").outerWidth());//获取盒⼦的外部区域的宽度(包括边框)console.log($(".box").outerHeight(true));//获取盒⼦的外部区域的⾼度(⽰包括边距) console.log($(".box").outerWidth(true));//获取盒⼦的外部区域的宽度(不包括边距) </script></body></html>显⽰如下:打印结果如下:3. ⽂档处理3.1 内部插⼊$("p").append("<p>p1</p>") 在p标签后⾯追加标签"<p>p1</p>" $("p").appendTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"后⾯$("p").prepend("<p>p1</p>") 在p标签前⾯追加标签"<p>p1</p>" $("p").prependTo("<p>p1</p>") 把p标签追加到标签"<p>p1</p>"前⾯3.2 外部插⼊$("p").after("<p>p1</p>") 在p标签的同级标签后⾯插⼊标签"<p>p1</p>" $("p").before("<p>p1</p>") 在p标签的同级标签前⾯插⼊标签"<p>p1</p>" $("p").insertAfter("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"后⾯$("p").insertBefore("<p>p1</p>") 把p标签插⼊到标签"<p>p1</p>"前⾯3.3 替换$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图⽚$(".div1").replaceAll("p") 把div类替换成⽂档中所有的p标签例⼦⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签</script></body></html>显⽰如下:例⼦⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><p>p1</p><p>p2</p><p>p3</p><p>p4</p><div class="div1">div5</div><div class="div1">div6</div><div class="div1">div7</div><script>$(".div1").replaceAll("p");//把div类替换成⽂档中所有的p标签</script></body></html>显⽰如下:3.4 删除$("p").empty() 删除所有的p标签中的所有的⼦标签$("p").remove([expr]) 删除所有的p标签以及p标签中的⼦标签3.5 复制$("p").clone() 克隆p标签$("p").clone(true) 布尔值指定事件处理函数是否会被复制3.6 循环使⽤jQuery实现的集合循环⽅式⼀:$.each(Array,function(){function_suite})⽅式⼆:$(element).each(function(){function_suite})例⼦:使⽤each循环进⾏判断代码⼀:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];$.each(li,function(i,v){if(v==33){return;}console.log(v);});</script></body></html>打印如下:代码⼆:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><script>li=[11,22,33,44,55,66,77];//定义循环,i为列表的索引,v为列表索引对应的值$.each(li,function(i,v){//当循环中的值为33时if (v==33){return false;}console.log(v);});</body></html>打印如下:结论:each的参数function内如果出现return,结束当次循环,类似于continueeach的参数function内如果出现return false,结束的是整个each循环,类似break4. 事件4.1 事件$("p").click() 单击事件$("p").dbclick() 双击事件$("p").mouseover() 当⿏标指针位于元素上⽅时触发事件$("p").mousemove() 当⿏标指针在指定的元素中移动时触发事件$("p").mouseout() 当⿏标指针从元素上移开时触发事件$("input[type='text']").focus() 元素获得焦点时,触发focus事件$("input[type='text']").blur() 元素失去焦点时,触发blur事件$("input[type='text']").change() 当元素的值发⽣改变时触发事件$("button").mousedown() 当按下⿏标时触发事件$("button").mouseup() 元素上放开⿏标按键时触发事件$(window).keydown() 当键盘或按钮被按下时触发事件$(window).keypress() 当键盘或按钮被按下时触发事件,每输⼊⼀个字符都触发⼀次事件$(window).scroll() 当⽤户滚动窗⼝的滚动条时触发事件$(window).resize() 当调整浏览器窗⼝的⼤⼩时触发事件$(window).unload() ⽤户离开页⾯时,触发事件$("input").keyup() 当按钮被松开时触发事件$("input").select() 当input元素中的⽂本被选择时触发事件$("form").submit() 当提交表单时触发事件4.2 绑定⽅式$(标签).事件(函数内容)4.3 事件委托通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件在页⾯不刷新的情况下添加⼀⾏数据,⾏数据有操作按钮,点击并⽆效果,就可以通过事件委托来解决委托⽅式:$("ul").on("click","li",function(){function_suite})例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.2.1.js"></script></head><body><div id="box"><div class="item">111</div><div class="item">222</div><div class="item">333</div><div class="item">444</div><div class="item">555</div><div class="item">666</div></div><button>ADD</button><script>//为"button"按钮添加点击事件$("button").click(function(){$("#box").append("<div class='item'>777</div>");//在div标签后⾯添加⼀⾏//为"box"下的"item"类添加点击事件$("#box").on("click",".item",function(){console.log($(".item").text());//打印"item"类的⽂本})</script></body></html>4.4 event object所有的事件函数都可以传⼊event参数⽅便处理事件⽅式:$("p").click(function(event){function_suite})(event_object)的属性⽅法event.pageX 事件发⽣时,⿏标距离⽹页左上⾓的⽔平距离event.pageY 事件发⽣时,⿏标距离⽹页左上⾓的垂直距离event.type 事件的类型event.which 按下了哪⼀个键event.data 在事件对象在绑定数据,然后传⼊事件处理函数event.target 事件针对的⽹页元素event.preventDefault() 阻⽌事件的默认⾏为(⽐如点击链接,会⾃动打开新页⾯)event.stopPropagation() 停⽌事件向上层元素冒泡4.5 动画效果基点$("p").show() 显⽰隐藏的匹配元素$("p");show("slow") 参数表⽰速度,("slow","normal","fast"),也可以设置为毫秒$("p").hide() 隐藏显⽰的元素$("p").toggle() 切换显⽰/隐藏例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg">;//定义⼀张图⽚<hr><button class="hide_element">hide</button>;//定义隐藏按钮<button class="show_element">show</button>;//定义显⽰按钮<button class="toggle_element">toggle</button>;//定义切换按钮<script>//定义隐藏的点击事件$(".hide_element").click(function(){$("img").hide()});//定义显⽰的点击事件$(".show_element").click(function(){$("img").show()});//定义切换按钮的点击事件$(".toggle_element").click(function(){$("img").toggle()});</script></body></html>⽤浏览器打开的效果如下:可以看到,图⽚是显⽰的,点击"hide"按钮,图⽚就被隐藏起来,然后再点击"show"按钮,图⽚就⼜会被显⽰出来了.另外,当图⽚显⽰的时候,点击"toggle"按钮,图⽚就会隐藏,⽽当图⽚是隐藏的时候,点击"toggle"按钮,图⽚⼜会显⽰出来.4.6 滑动操作$("p").slideDown("1000") ⽤1000毫秒的时间将段落滑下$("p").slideUp("1000") ⽤1000毫秒的时间将段落滑上$("p").slideToggle("1000") ⽤1000毫秒的时间将段落滑上,滑下例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../0814/jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="slide_up">slide_up</button><button class="slide_down">slide_down</button><button class="toggle">toggle</button><script>//对"slide_up"类绑定点击事件$(".slide_up").click(function(){$("img").slideUp(1000);//⽤1000毫秒的时间将段落收起});//对"slide_down"类绑定点击事件$(".slide_down").click(function(){$("img").slideDown(1000);//⽤1000毫秒的时间将段落滑下});//对"toggle"类绑定点击事件$(".toggle").click(function(){$("img").slideToggle(1000);//⽤1000毫秒的时间将段落滑下或者收起 });</script></body></html>4.7 淡⼊淡出$("p").fadeIn("1000") ⽤1000毫秒时间将段落淡⼊$("p").fadeOut("1000") ⽤1000毫秒时间将段落淡出$("p").fadeToggle("1000") ⽤1000毫秒时间将段落淡⼊,淡出$("p").fadeTo("slow",0.6) ⽤慢速度将段落的透明度调整到0.6例⼦:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="../jquery-3.2.1.js"></script></head><body><img src="a.jpg" style="width:500px;height:300px"><hr><button class="fade_in">fadeIn</button><button class="fade_out">fadeOut</button><button class="fade_toggle">fadeToggle</button><button class="fade_to">fadeTo</button><script>//对"fade_in"类绑定点击事件$(".fade_in").click(function(){$("img").fadeIn(1000);//⽤1000毫秒时间将段落淡⼊});//对"fade_out"类绑定点击事件$(".fade_out").click(function(){$("img").fadeOut(1000);//⽤1000毫秒时间将段落淡出});//对"fade_toggle"类绑定点击事件$(".fade_toggle").click(function(){$("img").fadeToggle(1000);//⽤1000毫秒时间将段落淡⼊或淡出});//对"fade_to"类绑定点击事件$(".fade_to").click(function(){$("img").fadeTo("slow",0.6);//⽤慢速度将图⽚的透明度调整到0.6 });</script></body></html>4.8 页⾯载⼊页⾯载⼊,也就是当页⾯载⼊成功后⽴即运⾏的函数事件$(document).ready(function(){function_suite})也可以简写为:$(function(){function_suite})。
jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式jQuery修改class属性和CSS样式class属性修改 类属性即class属性,规定类名. ⽤类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有⼀个class属性.但是class属性的值可以是多个名称,即可能包含⼀个词的列表,中间⽤空格分隔. 具体使⽤⽅法见: ⽤jQuery进⾏类名修改既可以⽤attr()⽅法修改”class”属性,也可以⽤addClass(), removeClass(), toggleClass()等⽅法来完成.addClass() API: addClass()⽅法向匹配的元素增加指定的类名(⼀个或多个). 注意对于元素来说,class属性可以有多个值.该⽅法不会移除已经存在的值,⽽是在原有的基础上追加⼀个或多个class属性. ⽤attr()⽅法设置class属性,是⼀个覆盖的过程;⽽addClass()则是⼀个追加的过程. class之间最终是⽤空格来隔开的. 如果需要添加多个类,⽤空格分隔类名. 从1.4开始,这个⽅法的参数也可以传⼊⼀个function.removeClass() API: removeClass()⽅法从被选元素移除⼀个或多个类.如需移除若⼲类,⽤空格来分隔类名. 如果没有传参数,该⽅法将会移除被选元素的所有类.toggleClass() API: toggleClass()⽅法对被选元素的⼀个或多个类进⾏切换(设置或移除). 该⽅法检查每个元素中的指定类,如果存在则删除,如果不存在则添加. 通过添加参数,可以设置只进⾏删除或者只进⾏添加操作. 格式:$(selector).toggleClass(class,switch) switch值为true时,只添加;为false时,只删除.hasClass() API: hasClass()⽅法检查被选元素是否包含指定的class. 还可以⽤is()⽅法实现同样的功能,⽅法参数传⼊⼀个选择器字符串,⽐如”.className”.CSS样式修改 jQuery中还有⼀些⽅法直接返回或者设置元素的CSS属性.css() API: 读操作: 获取匹配元素集合中第⼀个元素的指定样式值(⼀个或多个). 注:读取多个样式值的操作是在jQuery v1.9才加⼊的. 写操作: 为匹配元素集合中的每⼀个元素设置⼀个或多个CSS属性的值. 传⼊的参数可以是单个的键值对,也可以是PlainObject指定的多个值,还可以是function.(v1.4). jQuery会处理各个浏览器中不太相同的⼀些具体情况,⽐如W3C的cssFloat在IE中是styleFloat,在jQuery中,你可以使⽤float,然后jQuery会帮你把它翻译成每个浏览器中应该有的正确名称. 还有,jQuery会合理解读CSS和DOM格式的多词属性,⽐如.css(“background-color”)和.css(“backgroundColor”),它都是可以处理的.height()和width() API: 和 ⾼度和宽度属性.这个宽⾼值不包括padding,border和margin.除⾮box-sizing属性被使⽤了. 注意写操作的时候set的是content的宽⾼,不包括box-sizing的部分. 读操作仍然是返回集合第⼀个元素的属性值. .css(“width”)和.width()的区别是:前者返回带单位的值,⽐如400px;后者返回不带单位的像素数值,即400. 所以如果值需要被⽤于某种计算,.height()和.width()是被推荐使⽤的. 读取得到的数值不⼀定是整型,并且如果⽤户缩放了页⾯,其值可能是不正确的,因为浏览器没有暴露这种情况的API. 还有⼀种不准确的情况,当这个元素的⽗元素隐藏起来时,该元素的尺⼨可能读不准. 写操作⽀持的value类型是字符串或者数字. 如果是数字,jQuery默认是px为单位. 如果是字符串,除了可以数字加单位之外,任何合理的CSS measurement都可以⽤,⽐如100%,50%,或者auto.position() API: 返回第⼀个匹配元素相对于⽗元素(offset parent)的位置. 只有读操作.offset() API: 返回第⼀个匹配元素的坐标,或者设定每⼀个匹配元素的坐标,这个坐标是相对于document的.offsetParent() API: 返回⽗类,只有读操作.scrollLeft()和scrollTop() API: 和参考资料 圣思园张龙⽼师JavaWeb视频教程75 jQuery API: w3school 参考⼿册: 属性操作: CSS操作: CSS类选择器:。
Jquery复习DAY2（jQuery属性操作jQuery文本属性值jQuery元素操作）
Jquery复习DAY2（jQuery属性操作jQuery⽂本属性值jQuery元素操作）5. jQuery 属性操作5.1 设置或获取元素固有属性值 prop()所谓元素固有属性就是元素本⾝⾃带的属性，⽐如 <a> 元素⾥⾯的 href ，⽐如 <input> 元素⾥⾯的 type。
1. 获取属性语法prop(''属性'')2. 设置属性语法prop(''属性'', ''属性值'')5.2 设置或获取元素⾃定义属性值 attr()⽤户⾃⼰给元素添加的属性，我们称为⾃定义属性。
⽐如给 div 添加 index =“1”。
1. 获取属性语法attr(''属性'') // 类似原⽣ getAttribute()2. 设置属性语法attr(''属性'', ''属性值'') // 类似原⽣ setAttribute()改⽅法也可以获取 H5 ⾃定义属性5.3 数据缓存 data()data() ⽅法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。
⼀旦页⾯刷新，之前存放的数据都将被移除。
1. 附加数据语法data(''name'',''value'') // 向被选元素附加数据2. 获取数据语法date(''name'') // 向被选元素获取数据同时，还可以读取 HTML5 ⾃定义属性 data-index ，得到的是数字型6. jQuery 内容⽂本值主要针对元素的内容还有表单的值操作。
1. 普通元素内容 html()（相当于原⽣inner HTML)html() // 获取元素的内容html(''内容'') // 设置元素的内容2. 普通元素⽂本内容 text() (相当与原⽣ innerText)text() // 获取元素的⽂本内容text(''⽂本内容'') // 设置元素的⽂本内容主要针对元素的内容还有表单的值操作。
jquery遍历元素的方法
jquery遍历元素的方法jQuery是最流行的JavaScript库之一。
它的强大之处在于它提供了一组强大的API，可以帮助开发人员快速高效地操作HTML文档和CSS样式。
jQuery的一个关键功能是遍历元素。
这意味着开发人员可以遍历页面上的所有元素或指定的元素，查找或修改元素的属性、样式或内容。
以下是一些最常用的jQuery遍历方法。
#1 .find().find()方法是jQuery的一个强大的方法，可以在指定元素的子元素中查找匹配的元素。
它使用CSS选择器语法，并且可以与其它选择器方法（如.filter()和.not()）一起使用。
例如，如果要查找class为"example"的所有div元素，可以使用以下代码：$('div').find('.example');#2 .children().children() 方法与 .find() 方法类似，不同的是它只匹配指定元素的子元素，而不是所有后代元素。
这对于需要修改某些特定元素的子元素时很有用。
例如，如果要查找class为"example"的所有直接子元素，可以使用以下代码：$('div').children('.example');#3 .siblings().siblings()方法用于选择指定元素的所有同级元素，这对于在同级元素之间进行比较或修改时很有用。
例如，如果要查找指定元素的所有同级元素，可以使用以下代码：$('.example').siblings();#4 .eq().eq()方法可用于选择集合中的某个元素。
参数是一个基于零的索引，表示要选择的元素。
例如，如果要选择class为"example"的元素集合中的第三个元素，可以使用以下代码：$('.example').eq(2);#5 .first()和.last().first()方法用于选择集合中的第一个元素，.last()方法用于选择集合中的最后一个元素。
jquery的attr用法
jquery的attr用法jQuery的attr(方法用于获取或设置元素的属性值。
它可以用于以下几种情况：1.获取属性值要获取元素的属性值，可以将属性名称作为attr(方法的参数。
例如，我们可以获取一个图片的src属性值：```javascriptvar src = $("img").attr("src");```这样可以返回页面中第一个img元素的src属性值。
2.设置属性值要设置元素的属性值，可以将属性名称和设置的值作为attr(方法的参数。
例如，我们可以设置一个图片的src属性值：```javascript$("img").attr("src", "new_image.jpg");```这样会将页面中所有的img元素的src属性值都设置为"new_image.jpg"。
3.多个属性值设置attr(方法还可以传入一个对象作为参数，用于同时设置多个属性值。
对象的属性名表示要设置的属性名称，属性值表示要设置的属性值。
例如，我们可以同时设置一个链接的href和title属性值：```javascript$("a").attr"title": "Example"});```4.属性的回调函数attr(方法还可以使用回调函数来设置属性值。
回调函数的参数包含两个参数：元素索引和原属性值。
回调函数返回的值将成为新的属性值。
例如，我们可以将一个图片的宽度作为其高度的一半：```javascript$("img").attr("height", function(index, oldValue)return parseInt(oldValue) / 2;});```这样会将页面中所有的img元素的高度设置为原来的一半。
js调用jquery方法
js调用jquery方法
JavaScript可以调用jQuery方法来实现一些功能，下面介绍一些常见的方法：
1. 选择器：使用jQuery的选择器可以方便地获取HTML元素，例如：$('p')表示选择所有的段落元素。
2. 事件绑定：使用jQuery的on()方法可以绑定事件，例如：$('p').on('click', function(){})表示绑定点击事件。
3. 隐藏和显示元素：使用jQuery的hide()和show()方法可以隐藏和显示HTML元素，例如：$('p').hide()表示将所有段落元素隐藏。
4. 修改样式：使用jQuery的css()方法可以修改元素的样式，例如：$('p').css('color', 'red')表示将所有段落元素的颜色修改为红色。
5. 属性操作：使用jQuery的attr()、prop()和val()方法可以操作元素的属性，例如：$('input').val()表示获取所有输入框的值。
6. 动画效果：使用jQuery的动画效果可以让元素呈现出平滑的动态效果，例如：$('p').slideDown()表示让所有段落元素向下滑动。
7. Ajax请求：使用jQuery的ajax()方法可以发送异步请求，例如：$.ajax({url: 'test.php', success: function(result){}})表示发送一个请求到test.php并在请求成功后执行回调函数。
总之，使用jQuery可以方便地操作HTML元素和发送Ajax请求，提高开发效率。
jQuery使用CSS（）方法给指定元素同时设置多个样式
jQuery使⽤CSS（）⽅法给指定元素同时设置多个样式本⽂实例讲述了jQuery使⽤CSS()⽅法给指定元素同时设置多个样式的⽅法。
分享给⼤家供⼤家参考。
具体如下：<!DOCTYPE html><html><head><script src="js/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").css({"background-color":"blue","font-size":"14px"});});});</script></head><body><h2>This is a heading</h2><p style="background-color:#ff0000">This is a paragraph.</p><p style="background-color:#00ff00">This is a paragraph.</p><p style="background-color:#0000ff">This is a paragraph.</p><p>This is a paragraph.</p><button>Set multiple styles for p</button></body></html>希望本⽂所述对⼤家的jQuery程序设计有所帮助。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
获取常用属性
虽然我们可以通过获取属性,特性以及 虽然我们可以通过获取属性 特性以及CSS样式来取得元 特性以及 样式来取得元 素的几乎所有信息, 但是注意下面的实验: 素的几乎所有信息 但是注意下面的实验 我们希望获取测试图层的宽度, 使用attr方法获取 元素特 方法获取"元素特 我们希望获取测试图层的宽度 使用 方法获取 性"为undifined 为 因为并没有为div添加 添加width. 而使用 而使用css()方法虽然可以获 因为并没有为 添加 方法虽然可以获 取到style属性的值 取到 属性的值 但是在不同浏览器里返回的结果不同, 下返回auto, 而 但是在不同浏览器里返回的结果不同 IE6下返回 下返回 FF下虽然返回了正确的数值但是后面带有 下虽然返回了正确的数值但是后面带有"px". 下虽然返回了正确的数值但是后面带有 所以jQuery提供了 提供了width()方法 此方法返回的是正确的不 方法, 所以 提供了 方法 的数值. 带px的数值 的数值
本章将讲解如何使用jQuery获取和修改元素属性和样式 获取和修改元素属性和样式. 本章将讲解如何使用 获取和修改元素属性和样式
区分DOM属性和元素属性 属性和元素属性 区分
一个img标签 标签: 一个 标签
通常开发人员习惯将id, 等叫做这个元素的“ 通常开发人员习惯将 src, alt等叫做这个元素的“属性”. 等叫做这个元素的 属性” 我们将其称为"元素属性 元素属性". 我们将其称为 元素属性 但是在解析成DOM对象时 实际浏览器最后会将标签元素解析成 对象时, 但是在解析成 对象时 "DOM对象 并且将元素的 元素属性 存储为 对象", 元素属性"存储为 属性". 对象 并且将元素的"元素属性 存储为"DOM属性 属性 两者是有区别的. 例如: 两者是有区别的 例如
本篇文章主要讲解如何使用jQuery操作元素的属性和修 操作元素的属性和修 本篇文章主要讲解如何使用 改样式. 请大家主要注意元素属性和DOM属性的区别 改样式 请大家主要注意元素属性和 属性的区别
下一章将讲解最重要的事件, 介绍如何绑定事件 操作事件 下一章将讲解最重要的事件 介绍如何绑定事件, 对象等. 对象等
• 虽然我们设置了元素的 是相对路径 虽然我们设置了元素的src是相对路径 是相对路径:images/image.1.jpg • 但是在"DOM属性 中都会转换成绝对路径: 属性"中都会转换成绝对路径 但是在 属性 中都会转换成绝对路径 http://localhost/images/image.1.jpg. • 甚至有些 元素属性"和"DOM属性 的名称都不一样 比如上面的元素属 甚至有些"元素属性 和 属性"的名称都不一样 元素属性 属性 的名称都不一样,比如上面的元素属 转换为DOM属性后对应 属性后对应className. 性class, 转换为 属性后对应
removeClass方法的参数可选 如果不传入参数则移除全 方法的参数可选, 如果不传入参数则移除全 方法的参数可选 部CSS类: : 类
修改CSS类 类 修改
同样当我们想要修改元素的具体某一个CSS样式 即修改元素属性 样式,即修改元素属性 同样当我们想要修改元素的具体某一个 样式 "style"时, jQuery也提供了相应的方法 也提供了相应的方法: 时 也提供了相应的方法
操作"DOM属性 属性" 操作 属性
中没有包装操作"DOM属性 的函数 因为使用 属性"的函数 在jQuery中没有包装操作 中没有包装操作 属性 的函数, javascript获取和设置 获取和设置"DOM属性 都很简单 在jQuery提供 属性"都很简单 获取和设置 属性 都很简单. 提供 函数用于遍历jQuery包装集 其中的 包装集, 了each()函数用于遍历 函数用于遍历 包装集 其中的this指针是一 指针是一 对象, 个DOM对象 所以我们可以应用这一点配合原生 对象 所以我们可以应用这一点配合原生javascript 来操作元素的DOM属性 属性: 来操作元素的 属性
第四章 操作元素的属性与样式
学习目标
本篇文章讲解如何使用jQuery获取和操作元素的属性和 获取和操作元素的属性和 本篇文章讲解如何使用 CSS样式 其中 样式. 属性和元素属性的区分值得大家学习. 样式 其中DOM属性和元素属性的区分值得大家学习 属性和元素属性的区分值得大家学习
通过前面几章我们已经能够完全控制jQuery包装集了, 通过前面几章我们已经能够完全控制jQuery包装集了, 无 包装集了 论是通过选择器选取对象, 或者从包装集中删除,过滤元素 过滤元素. 论是通过选择器选取对象 或者从包装集中删除 过滤元素
ቤተ መጻሕፍቲ ባይዱ
操作"元素属性 操作 元素属性" 元素属性
操作"元素属性 操作 元素属性" 元素属性
当使用id选择器时常常返回只有一个对象的 包装集, 当使用 选择器时常常返回只有一个对象的jQuery包装集 选择器时常常返回只有一个对象的 包装集 这个时侯常使用attr(name)函数获得它的元素属性 函数获得它的元素属性: 这个时侯常使用 函数获得它的元素属性
操作"元素属性 操作 元素属性" 元素属性
我们可以使用javascript中的 中的getAttribute和setAttribute 我们可以使用 中的 和 来操作元素的"元素属性 元素属性". 来操作元素的 元素属性
操作"元素属性 操作 元素属性" 元素属性
中给你提供了attr()包装集函数 能够同时操作 包装集函数, 在jQuery中给你提供了 中给你提供了 包装集函数 包装集中所有元素的属性: 包装集中所有元素的属性
修改CSS类 类 修改
下表是修改CSS类相关的 类相关的jQuery方法 方法: 下表是修改 类相关的 方法
修改CSS类 类 修改
addClass( class ) 和removeClass( [classes] ) 的参数 可以一次传入多个css类, 用空格分割 比如 比如: 可以一次传入多个 类 用空格分割,比如
修改CSS样式 样式 修改
修改元素的样式, 我们可以修改元素 元素CSS类或者直接修改 修改元素的样式 我们可以修改元素 类 元素的样式. 元素的样式 一个元素可以应用多个css类, 但是不幸的是在 类 但是不幸的是在DOM属性 一个元素可以应用多个 属性 中是用一个以空格分割的字符串存储的, 而不是数组. 中是用一个以空格分割的字符串存储的 而不是数组 所以 如果在原始javascript时代我们想对元素添加或者删除多 如果在原始javascript时代我们想对元素添加或者删除多 个属性时, 都要自己操作字符串. 个属性时 都要自己操作字符串 jQuery让这一切变得异常简单 我们再也不用做那些无聊 让这一切变得异常简单. 让这一切变得异常简单 的工作了. 的工作了
each函数的说明 函数的说明: 函数的说明 each( callback ) Returns: jQuery包装集 包装集 对包装集中的每一个元素执行callback方法 其中 方法. 对包装集中的每一个元素执行 方法 其中callback 方法接受一个参数, 表示当前遍历的索引值,从 开始 开始. 方法接受一个参数 表示当前遍历的索引值 从0开始
区分DOM属性和元素属性 属性和元素属性 区分
中我们可以直接获取或设置"DOM属性 属性": 在javascript中我们可以直接获取或设置 中我们可以直接获取或设置 属性
所以如果要设置元素的CSS样式类 要使用的是 样式类, 要使用的是"DOM属 所以如果要设置元素的 样式类 属 而不是"元素属性 性"className"而不是 元素属性 而不是 元素属性"class:
attr(key, name)会设置所有包装集中的元素属性 会设置所有包装集中的元素属性: 会设置所有包装集中的元素属性
attr( properties ) 可以一次修改多个元素属性： 可以一次修改多个元素属性：
操作"元素属性 操作 元素属性" 元素属性
删除元素属性, 使用 removeAttr( name ) 删除元素属性 但是对应的 DOM属性是不会被删除的 只会影响 属性是不会被删除的, 属性的值. 属性是不会被删除的 只会影响DOM属性的值 属性的值 比如将一个input元素的 元素的readonly元素属性去掉 会导致对 元素属性去掉,会导致对 比如将一个 元素的 元素属性去掉 应的DOM属性变成 属性变成false(即input变成可编辑状态 变成可编辑状态): 应的 属性变成 即 变成可编辑状态
宽和高相关 (1)
宽和高相关 (2)
宽和高相关 (3)
宽和高相关 (4)
宽和高相关 Height and Width
关于在获取长宽的函数中, 要区别"inner", "outer"和 关于在获取长宽的函数中 要区别 和 height/width这三种函数的区别 这三种函数的区别: 这三种函数的区别
位置相关 Positioning(1)
很多的计算位置的方法存在着浏览器兼容性问题, 很多的计算位置的方法存在着浏览器兼容性问题 jQuery中为我们提 中为我们提 供了位置相关的各个函数: 供了位置相关的各个函数
位置相关 Positioning(2)
位置相关 Positioning(3)
总结