JQuery基本属性介绍
JQuery基本属性介绍1 attr(name|properties|key,value|fn)概述设置或返回被选元素的属性值。
参数nameString V1.0属性名称properties Map V1.0作为属性的“名/值对”对象key,value String,Object V1.0属性名称，属性值key,function(index, attr)String,Function V1.11:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
示例参数name 描述:返回文档中所有图像的src属性值。
jQuery 代码:$("img").attr("src");参数properties 描述:为所有图像设置src和alt属性。
将文档中图像的src属性删除HTML 代码:<img src="test.jpg"/>jQuery 代码:$("img").removeAttr("src");结果:[ <img /> ]3 prop(name|properties|key,value|fn)概述获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。
jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误参数name String V1.6属性名称properties Map V1.6作为属性的“名/值对”对象key,value String,Object V1.6属性名称，属性值key,function(index, attr)String,Function V1.61:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
示例参数name 描述:选中复选框为true，没选中为falsejQuery 代码:$("input[type='checkbox']").prop("checked");参数properties 描述:禁用页面上的所有复选框。
jQuery 代码:$("input[type='checkbox']").prop({disabled: true});参数key,value 描述:禁用和选中所有页面上的复选框。
jQuery 代码:$("input[type='checkbox']").prop("disabled", false);$("input[type='checkbox']").prop("checked", true);参数key,回调函数描述:通过函数来设置所有页面上的复选框被选中。
jQuery 代码:$("input[type='checkbox']").prop("checked", function( i, val ) {return !val;});4 removeProp(name)概述用来删除由.prop()方法设置的属性集随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。
jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误参数propertyNameString V1.6要删除的属性名示例描述:设置一个段落数字属性，然后将其删除。
HTML 代码:<p> </p>jQuery 代码:var $para = $("p");$para.prop("luggageCode", 1234);$para.append("The secret luggage code is: ",String($para.prop("luggageCode")), ". ");$para.removeProp("luggageCode");$para.append("Now the secret luggage code is: ",String($para.prop("luggageCode")), ". ");结果:The secret luggage code is: 1234. Now the secret luggage code is: undefined.5 addClass(class|fn)概述为每个匹配的元素添加指定的类名。
参数classString V1.0一个或多个要添加到元素中的CSS类名，请用空格分开function(index, class)Function V1.4此函数必须返回一个或多个空格分隔的class名。
接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
示例参数class 描述:为匹配的元素加上 'selected' 类jQuery 代码:$("p").addClass("selected");$("p").addClass("selected1 selected2");回调函数描述:给li加上不同的classHTML 代码:<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>jQuery 代码:$('ul li:last').addClass(function() {return 'item-' + $(this).index();});6 toggleClass(class|fn[,sw])概述如果存在（不存在）就删除（添加）一个类。
参数classString V1.0CSS类名class,switchString,Boolean V1.31:要切换的CSS类名.2:用于决定元素是否包含class的布尔值。
switchBoolean V1.4用于决定元素是否包含class的布尔值。
function(index, class,switch)[, switch] Function,Boolean V1.41:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。
接收元素的索引位置和元素旧的样式类作为参数。
2: 一个用来判断样式类添加还是移除的 boolean 值。
示例参数class 描述:为匹配的元素切换 'selected' 类jQuery 代码:$("p").toggleClass("selected");参数class,switch 描述:每点击三下加上一次 'highlight' 类HTML 代码:<strong>jQuery 代码:</strong>jQuery 代码:var count = 0;$("p").click(function(){$(this).toggleClass("highlight", count++ % 3 == 0);});回调函数描述:根据父元素来设置class属性jQuery 代码:$('div.foo').toggleClass(function() {if ($(this).parent().is('.bar') {return 'happy';} else {return 'sad';}});7 html([val|fn])概述取得第一个匹配元素的html内容。
这个函数不能用于XML文档。
但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。
如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
参数valString V1.0用于设定HTML内容的值function(index, html)Function V1.4此函数返回一个HTML字符串。
接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。
示例无参数描述:返回p元素的内容。
jQuery 代码:$('p').html();参数val 描述:设置所有 p 元素的内容jQuery 代码:$("p").html("Hello <b>world</b>!");回调函数描述:使用函数来设置所有匹配元素的内容。
jQuery 代码:$("p").html(function(n){return "这个 p 元素的 index 是：" + n;});8 text([val|fn])概述取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。
这个方法对HTML和XML 文档都有效。
参数valString V1.0用于设置元素内容的文本function(index, text)Function V1.4此函数返回一个字符串。
接受两个参数，index为元素在集合中的索引位置，text 为原先的text值。
示例无参数描述:返回p元素的文本内容。
jQuery 代码:$('p').text();参数val 描述:设置所有 p 元素的文本内容jQuery 代码:$("p").text("Hello world!");回调函数描述:使用函数来设置所有匹配元素的文本内容。
jQuery 代码:$("p").text(function(n){return "这个 p 元素的 index 是：" + n;});9 返回值:String,Arrayval([val|fn|arr])概述获得匹配元素的当前值。
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对标签添加只读（readonly）或者禁用（disabled）属性
jquery对标签添加只读（readonly）或者禁⽤（disabled）属性⽬录⼀、jQuery⼆、关于readonly属性三、jquery 设置disabled属性四、jquery动态添加⽂本框的readonly只读属性⼀、jQueryjQuery是⼀个JavaScript库。
jQuery 极⼤地简化了 JavaScript 编程。
jQuery 很容易学习。
实例：$(document).ready(function(){$("p").click(function(){$(this).hide();});});源码：<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="https:///jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){$("p").click(function(){$(this).hide();});});</script></head><body><p>如果你点我，我就会消失。
</p><p>继续点我!</p><p>接着点我!</p></body></html>运⾏结果：上图运⾏结果只要点击⽂字就会消失，感兴趣的⼩伙伴可以下去试⼀下⼆、关于readonly属性例1、jquery 设置readonly属性$('input').attr("readonly","readonly") //将input元素设置为readonly$('input').removeAttr("readonly"); //去除input元素的readonly属性if($('input').attr("readonly") == true)//判断input元素是否已经设置了readonly属性例2、对于为元素设置readonly属性和取消readonly属性的⽅法$('input').attr("readonly",true)//将input元素设置为readonly$('input').attr("readonly",false)//去除input元素的readonly属性$('input').attr("readonly","readonly")//将input元素设置为readonly$('input').attr("readonly","")//去除input元素的readonly属性三、jquery 设置disabled属性例1、jquery 设置disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').removeAttr("disabled");//去除input元素的disabled属性if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性例2、对于为元素设置disabled属性和取消disabled属性的⽅法$('input').attr("disabled",true)//将input元素设置为disabled$('input').attr("disabled",false)//去除input元素的disabled属性$('input').attr("disabled","disabled")//将input元素设置为disabled$('input').attr("disabled","")//去除input元素的disabled属性四、jquery动态添加⽂本框的readonly只读属性<input id="test" type="text" />$("#test").attr({"readonly":"readonly"}); //添加readonly属性// 或者$("#ID").attr({ readonly: 'true' });$("#test").removeAttr("readonly"); //去除readonly属性到此这篇关于jquery对标签添加只读（readonly）或者禁⽤（disabled）属性的⽂章就介绍到这了,更多相关jquery对标签添加只读或禁⽤属性内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！。
用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})。
jq基础笔记
JQuery等价于$$(document).ready(function(){});简写==$(function(){});返回值都为[object Object]容错，jQ发生错误不报错1，jq选择器1>基本选择器$（“#idName”）------通过id找元素$(“.className” )------通过class找元素$(“tagName”)-------通过标签找元素$(“*”)---------匹配所有的元素$(“li *”)----li下的全部一般用于局部环境内$(“selector1,selector2”)---群组匹配元素$(“box.div”)-----限定必须是box元素的div2，层级选择器$(“a b”)-----匹配a的后代中所有b元素$(“a>b”)----匹配a中子代b元素（只找儿子，不找孙子）$(“a+b”)----匹配紧邻的一个兄弟b元素（紧邻，一个）$(“a~b”)----匹配a之后的所有兄弟b元素（之后所有）3，过滤选择器1>基本选择器a>特定位置的过滤$(“li:first”)--- --匹配第一个li元素$(“li:last”) ---匹配找到的li中最后一个li元素$(“li:eq(index)”)---匹配找到的li中索引为index的li。
（index从零开始）b>指定范围的过滤$(“li:lt(index)”) --匹配index之前的所有li（不包含index位置的li）；$(“li:gt(index)”)---匹配index之后的所有li（不包含index位置的li）$(“li:not(selector)”)---匹配除了not的li内元素$(“li:odd”)----匹配偶数行（索引为奇数）的li$(“li:even”)----匹配奇数行（索引为偶数）的li2>属性过滤$(“[标签属性]”)-----匹配有该属性的俄元素$(“[标签属性=值]”)---匹配属性=指定的元素$(“[标签属性^=value]”)$(“[标签属性$=value]”)$(“[标签属性!=value]”)3>子元素选择器$(“li:first”)------将所有匹配到的元素中只选第一个（返回第一个元素）$(“li:first-child”)----匹配每个li的父元素的第一个孩子（可返回多个元素）$(“li:last”)和(“li:last-child”)用法与以上类似$(“li:only-child”)------匹配li的父级只有一个孩子的li元素val=$(“#id”).val（）---获取#id 的文本内容$("#btn").click(function(){var val=$("#txt").val();$("a:contains('"+val+"')").css("background","red");})4>内容过滤$(“li:contexts(text)”)--匹配内容中包含了text的文本的li$(“li:has(selector)”)---匹配内容中包含了selector元素的li$(“li:empty”)-----匹配内容为空的li元素$(“li:parent”)----匹配以li为父元素的DOM节点5>可见和隐藏选择器$(“div:hidden”)----匹配div中设置了display为none的元素，通过其他方式不可见的元素匹配不到；$(“div:visible”)---匹配div中没有设置display为none的元素，只认display设置不为none的元素备注：此选择器只以display设置的结果为准4，表单选择器$(“:input”) ------所有的表单中的控件：input button select$(“:text”)-------文本输入框---所有的input标签type属性值之前加冒号--表示相应的input元素$(“:disable”)---所有表单控件中设置了disable属性的元素$(“:enable”)----所有的表单控件中没有设置disable属性的元素$(“:checked”)---匹配被选中的单选按钮或者复选框$(“:selected”)---匹配被选中的option元素2，获取文本text( )------只获取到文本内容html( )-----获取包含标签在内的所有内容val( ) -----获取表单控件的文本设置内容text(“内容”)------设置内容，不解析标签html( “内容”)-----获取包含标签在内的所有内容val( “内容”) -----获取表单控件的文本.val([“check”,”radio”])----通过数组传递设置选定状态3，获取和设置元素的特性attr(“标签属性”)------获取该属性attr(“标签属性“，”属性值）-----设置该属性设置多个属性：attr({ 属性：属性值，属性：属性值}）；备注：多个属性设置之间用逗号分隔，最后一个无任何符号删除属性：removeAttr(“标签属性”)4，获取和设置DOM对象的属性property获取：prop( “属性”）设置：Prop(“属性””属性值”)备注：互补与attr( ),, 更适应结果为boolth的类型，5，attrbute和property区别1，区别：表示的意思不一样attrbute特性--所有设置的标签属性都存在attrbute类关联数组中获取：attrbute[ i ] 或者attrbute[“特性名”]property 属性标签有的特性，并已经设置了，可以通过property的方式获取获取：对象.属性名设置：如果对象没有该属性，可以通过对象.属性名=属性值jq：通过prop（）方式设置的属性，通过attr（）的方式获取不到对象没有的，通过attr（）方式设置的，通过prop（）的方式获取不到；联系：DOM元素有该特性，并且已经设置了，两种方式度可以获取到补充：通过attr( )获取不到的或设置不了的特殊属性，我们可以通过prop( )获取和设置例如：表单控件的checked属性；6，each( )----遍历每一个匹配到的元素使用语法：each（function(i,ele){ 执行内容}）;i-----表示每一个元素的索引Ele-----表示匹配到的每一个元素$(Ele)---将获取到的DOM元素转换成jq对象----用jq的API数组与遍历结合使用var arr=["#000","#0f0","#00f","#0ff","#f0f"];$(".warp").each(function(i){$(".warp").eq(i).css("backgroundColor",arr[i]);}); 这里不能使用this7，修改css属性的方法：attr(“class”,”类名”）addClass(“类名”)--------追加样式removeClass(“类名”)-----删除指定的类名removeclass( )------删除所有的类名toggleClass(“类名”）-------切换类名（在有和没有该类名之间切换）hasClasscss(“css属性”)--------获取一个css属性的值css(“css属性”,”属性值”）---设置一个csss属性css({属性：“属性值”，属性：“属性值”}）；8，获取索引：index( )-----在同辈中找索引index（“selector”）---在指定的同类(同辈)中找索引9，js对象和jq对象相互转换js-----jq 适用$( )工厂函数------$( js对象)jq----js $(“”)[index] 或者$(“”).get( index )转换之后的对象可以用彼此的API10，节点的遍历children( )/children( selector )----子代/子代中某个find( selector )-------在子孙后代中查找指定元素next( )/next( selector )------之后紧跟的一个兄弟元素/筛选某个紧邻的元素nextALL( )/nextAll( selector )----之后所有的兄弟元素prev( )/prev( selector )prevALL/prevALL( selector )siblings( )-----所有兄弟元素不包含自身parent( )------父元素输出---遍历到的内容console.log--只能输出一个，，用each( )11，创建元素$() 工厂函数创建var tr=$("<tr></tr>");$("#oDiv table").append(tr);添加元素父.append(子)----------子元素插入在父元素内容的后面父.preppend(子)--------子元素插入在父元素的内容的前面父.before(子)-----------子元素插入在父元素容器的前面父.after(子)--------------子元素插入在父元素容器的后面补充：反方向操作子.apppendTo(父)preppendTo(父)insertBefore(父)insertAfter(父)12, 替换被替换元素.replaceWith(替换的内容)；替换的内容.replaceAll(被替换元素);13,删除要删除的元素.remove();-----------------将匹配到的元素全部删除要删除的元素.remove(“selector”)-----匹配到的元素筛选后再删除14，复制jq对象.clone()------------------将匹配到的jq对象复制如果：jq对象使用嵌入的绑定事件，连同事件一起被复制如果：jq对象使用的分离式绑定事件，绑定的事件不会被复制如果想将分离式绑定的事件一起被复制：jq对象.clone(true);备注：clone（）紧紧是复制，并没有挂在DOM树上15，页面加载事件全写：jQuery(document).ready(function(){js语句})简写：$(function(){js语句})16，js的load事件和jq的ready事件的区别js中多个load事件只执行最后一个，jq的多个ready事件都会执行执行时机不同：js的load事件是在页面解析完毕之后执行jq的ready事件在DOM树生成的时候执行ready先于load执行17，$符号与其他框架发生冲突交出$的使用权：$.noConflict()交权的同时可以使用其他符号代替,例如：var Q=$.noConflict(); 收回$的使用权：jQuery（function($){此处可以使用$}）18,鼠标经过事件总结mouseovermouseout以上两个事件绑定给father：鼠标经过father 到son也会触发mouseenter可解决mouseleave以上两个事件绑定给father，经过son时不会触发hover将mousenter和mouseleave两个事件封装成一个事件执行jq对象.hover(function(){ 鼠标移入时执行},function(){ 鼠标移出时执行});$("#warp").hover(function(){$("#inner").stop().animate({bottom:0},1000)},function(){$("#inner").stop().animate({bottom:"-200px"},1000)});jq对象.hover(function(){鼠标移入移出都执行此函数---套路：此方法中实现的切换功能})19，事件的绑定方式：1, jq对象.事件名称(fn);eg：$(“#btn”).click(function(){})2, 用on绑定jq对象.on(“事件名称”，执行任务)写法有多种：$(“#btn”).on(“click mouseover”,fn);$(“#btn”).on({click:fn,moueover:fn});20,解除事件绑定：jq对象.off(“事件名称”，fn)------解绑事件名称执行的fn任务jq对象.off(“事件名称”)---------解绑事件名称执行的所有任务jq对象off()----------------解绑该对象的所有事件的所有任务星星评价二级出现增加21，on绑定事件实现的事件代理---------给未来的元素添加事件父.on(“type”,“子元素”，fn)以上父元素将事件类型代理给子元素（未来的），执行fn任务22，jq的事件对象：注意：jq事件对象中阻止事件冒泡和事件的默认行为只需使用事件对象的方法，兼容性已经处理（2.0）trigger 事件自动只执行（冒泡）triggerHander阻止冒泡23，事件的自动执行jq对象.事件名称（）------$(“#btn”).clickjq对象.trigger(“type”)------$(“btn”).trigger(“click”)备注：trgger会执行对象的默认行为，也会发生冒泡jq对象.triggerHandler(“type”)定时轮播备注：不会执行事件的默认行为，会阻止事件冒泡24，动画效果show( )hide( )toggle( )---切换执行show( ) hide( )可以传的速度参数：nomal slow fast 数字slideDown----向下滑开slideUp--------向上收齐animition-delay:数字----------延迟动画执行时间stop 当事件中断时，停止动画继续执行多事件合并执行---------节点1 . 方法1 . 节点2 . 方法2节点2 由节点1确定方法从前到后依次执行$(".banner .bg").fadeTo("fast",.6).attr("src",arr[idx]).fadeTo("fast",1);函数的调用方法：function fun(){}var mytime=setInterval(function(){$("#btn").click()},1000); var mytime=setInterval("$('#btn').click()",1000);var mytime=setInterval(fun,1000);var mytime=setInterval("fun()",1000);25，.offset ( ) 获取元素的当前坐标，坐标相对于文档25，获取窗口的相关尺寸js方法:clientHeight || document.documentElement.clientHeight-------获取页面内容所占的高度document.body.scrollHeight || document.documentElement.scrollHeight ------获取页面滚动的高度jq方法：var h=$(window).outHeight( )=$(window).innerHeight( )-----获取的是窗口的可见高度总结：js无法正常获取，只能通过jq获取窗口的可见高度jq无法获取，只能js获取页面的滚动高度outerHeight(）获取窗口可见的边框以内的尺寸offsetHeight$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin})事件放在引号内购物车--全选解除a标签的自身方法模态框视频1，视频标签<video></video>两种链接资源的方式：1，<video src=”视频资源”>2，<video><source src=”视频资源.mp4”><source src=””视频资源.avi></video>2，可通过标签属性来设置的属性control 控制视屏的控件muted 设置静音autoplay设置视频自动播放以上三个属性直接设置属性表示属性为true 不设置表示false poster 设置视屏暂停是的封面缺点：无法正常设置图片的尺寸解决：不使用该属性，而用定位的方式解决3，视屏中是通过js获取或者设置的属性currentTime视频当前播放时间，可以设置和获取paused获取当前是否处于暂停状态true--暂停false---播放ended 获取视屏是否播放到结尾true----播放完duration 获取视频的整个播放时长只能获取不能设置4，视频播放与暂停的方法play( )------播放pause( )-------暂停var w=$("v1").offsetWidth; 获取内容宽度var h=$("v1").offsetHeight; 获取内容高度补充：.get( index ) 根据索引获取html内容返回值：Element、Array.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。
菜鸟教程jquery语法
菜鸟教程jquery语法jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。
本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。
1. jQuery选择器选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。
以下是一些常见选择器：- 元素选择器$('p')：获取所有的p元素$('#header')：获取id为header的元素$('.nav')：获取class为nav的元素jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。
以下是一些常用的事件处理方法：- click()：点击事件$('button').click(function(){//执行操作});- hover()：鼠标悬停事件jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。
以下是一些常用的动画效果：- fadeIn()：淡入效果$('div').fadeIn();- slideUp()：上滑效果4. jQuery AJAX交互jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。
以下是一些常用的AJAX方法：- $.ajax()：发送和接收请求的函数$.ajax({type: 'post',url: 'test.php',data: {'name': '小明','age': 18},success: function(data){console.log(data);}});总结本文对jQuery的语法和用法进行了简单介绍，包括选择器、事件、动画和AJAX交互等常用功能。
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(''⽂本内容'') // 设置元素的⽂本内容主要针对元素的内容还有表单的值操作。
jq 语法
jq 语法在现代web开发中，前端框架和库越来越多，其中最广泛使用的就是jQuery。
而jQuery的核心语法就是jq语法。
jq语法是一种简单、直观的语法，使得前端开发者可以更轻松地操作HTML文档，完成复杂的交互效果。
下面我们将分步骤阐述jq语法。
1.选择器操作jq语法以选择器为基础，选择器通常会从文档中选取一个或多个HTML元素，然后对它们进行操作。
通过写选择器代码，我们可以实现诸如元素的增删改查等各种操作。
常见的选择器语法包括 $(select)、element、.class、#id 等。
比如想通过属性名选择到对应的元素，则可以用$("element[attribute='value']")的方式进行选择。
2.操作DOM元素DOM是文档对象模型，通过DOM，我们可以访问网页中的任何元素，并且变态和交互etc。
在jq语法中，我们可以用$()函数将一个DOM元素包裹起来，之后可以对这个对象进行操作。
比如，我们可以用.addClass()、.removeClass()、.toggleClass()等方法来操作元素的样式、大小等属性。
3.事件绑定事件绑定也是jq语法中不可或缺的一部分。
我们可以通过让某个事件与某个操作（如单击某个元素）关联起来，从而触发一些动作。
在jq语法中，我们可以通过.on()或者.click()、.dblclick()等方法来进行绑定。
例如，我们可以写 $(selector).click(function(){）来让某个元素被点击时触发某个动作。
4.ajax请求通过ajax请求，我们可以异步地向后端请求数据，并将其集成到前端。
这样做的好处是可以实现无需刷新网页即可更新页面内容的功能。
在jq语法中，可以通过$.ajax()方法来处理异步请求，同时也可以通过.ajaxSuccess()、.ajaxError()、.ajaxComplete()等来处理请求成功、失败等的情况。
jqGrid超详细属性说明
jqGrid超详细属性说明1.jqGrid Options<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"/TR/xhtml1/DTD/xhtml1-transitional.dtd>声明了文档的根元素是 html，它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Transitional//EN" 的DTD 中进行了定义。
浏览器将明白如何寻找匹配此公共标识符的 DTD。
如果找不到，浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。
另外，需要知道的是，HTML 4.01 规定的三种文档类型、XHTML 1.0 规定的三种 XML 文档类型都是：Strict、Transitional 以及 Frameset。
而这句<html xmlns="/1999/xhtml">，是在文档中的<html> 标签中使用 xmlns 属性，以指定整个文档所使用的主要命名空间。
对于文档声明，了解这些就足够了，现在的html5不再这么繁琐，只需要：<!DOCTYPE html><html>就可以了。
1.1.options 参数1.1.1.colModel设定各列的参数1.1.2.groupingView分组设置1.1.3.groupingView分组设置1.1.4.groupingView分组设置2.方法Methods 2.1.addRowData编辑行2.2.editRow 编辑行3.事件4.方法4.1.1.getGridParamsetGridParam4.1.2.编辑栏编辑框j Query("#list2").jqGrid('navGrid','#pager2',{ edit:true, add:true, del:true},{//edit ----------------------------------这里注意 edit ,add ,del 的顺序，默认的这个顺序，好像是不能改的//afterShowForm:afterShowEdit,afterSubmit:processAddEdit ,//beforeSubmit:validateData,closeAfterAdd:true,closeAfterEdit:true,reloadAfterSubmit:true},{//add //afterShowForm:afterShowAdd, afterSubmit:processAddEdit ,//beforeSubmit:validateData,closeAfterAdd:true,closeAfterEdit:true},{//del}//{view:true})/* .navButtonAdd('#pager2',{caption:'Add',onClickButton:function(){alert('i am button');}});*/});function afterShowEdit(formId){//do stuff after the form is rendered}function afterShowAdd(formId){}1.获得当前列表行数：$("#gridid").getGridParam("reccount");2.获取选中行数据（json）：$("#gridid").jqGrid('getRowData', id);3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData:''}).trigger('reloadGrid');4.选中行：$("#jqGrid").setSelection("1", true); （Toggles a selection of the row with id = rowid; if onselectrow is true (the default) then the event onSelectRow is launched, otherwise it is not.）//true:重新加载表格数据, false:不重新加载表格数据5.重置选中行：$("#jqgrid").resetSelection(); //Resets (unselects) the selected row(s). Also works in multiselect mode.6.清除：$("#jqgrid").clearGridData(); //Clears the currently loaded data from grid. If the clearfooter parameter is set to true, the method clears the data placed on the footer row.7. $("#jqgrid").setCell(rowid,colname,nData,cssp,attrp);//This method can change the content of particular cell and can set class or style properties. Where:rowid the id of the row,colname the name of the column (this parameter can be a number (the index of the column) beginningfrom 0data the content that can be put into the cell. If empty string the content will not be changed class if class is string then we add a class to the cell using addClass; if class is an array we set the new css properties via cssproperties sets the attribute properies of the cell,forceup If the parameter is set to true we perform update of the cell instead that the value is empty8.获取选中行IDvar rowid = $("#jqgrid").jqGrid('getGridParam','selrow');var rowid = $("#searchResultList").getGridParam("selrow");var rowData = $("#searchResultList").getRowData(rowid); /根据行ID，获取选中行的数据(根据) prmNames是jqGrid的一个重要选项，用于设置jqGrid将要向Server传递的参数名称。