泉州网站关键词排名,做网站什么主题好做,甘肃庆阳今天重大新闻,wordpress vps 配置---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名。 removeClass();//移除指定的类名. hasClass();//判断样式不存在 toggleClass();//切换css类名#xff0c;如果有就移除#xff0c;如果没有就添加 示例#xff1a;开关灯和模态框 CSS css(//添加指定的CSS类名。 removeClass();//移除指定的类名. hasClass();//判断样式不存在 toggleClass();//切换css类名如果有就移除如果没有就添加  示例开关灯和模态框 CSS css(color,red) //DOM操作tag.style.colorred 示例 $(P).css(color,red);//将所有P标签的字体设置为红色 原生DOM 修改css属性 var pEle document.getElementById(p1)pEle.style.colorgreenJquery修改css属性$(#p1).css(color,red)$(#p1).css(font-size,24px) //设置属性得值$(#P1).CSS(font-size) //获取属性的值$(#P1).CSS({border:1px solid black,color:blue}) //同时设置多个属性的值   位置 offset() //获取匹配元素在当前窗口的相对偏移或者设置 例$(.C3).offset() 获取 例$(.C3).OFFSET({top:284,left:400}) 设置 position()//获取匹配元素相对父元素的偏移例$(.C2).position() 获取 只能获取不能设置 scrollTop()//获取匹配元素相对滚动条顶部得偏移例$(window).scrollTop() srcollLeft()//获取匹配元素相对滚动条左侧的偏移 .offset()方法允许我们检索一个元素的相对于文档document的当前位置。 和.position()的差别在于 .position()是相对于父元素的位移 示例返回顶部示例 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 meta nameviewport contentwidthdevice-width, initial-scale16 title位置相关示例之返回顶部/title7 style8 .c1{9 width:100px;10 height:200px;11 background-color: red;12 }13 .c2{14 height:50px;15 width:50px;16 position: fixed;17 bottom:15px;18 right:15px;19 background-color: #2b669a;20 }21 .hide{22 display: none;23 }24 .c3{25 height: 100px;26 }27 /style28 /head29 body30 button idb1 classbtn btn-default点我/button31 div classc1/div32 div classc31/div33 div classc32/div34 div classc33/div35 div classc34/div36 div classc35/div37 div classc36/div38 div classc37/div39 div classc38/div40 div classc39/div41 div classc310/div42 div classc311/div43 div classc312/div44 div classc313/div45 div classc314/div46 div classc315/div47 div classc316/div48 div classc317/div49 div classc318/div50 div classc319/div51 div classc320/div52 div classc321/div53 div classc322/div54 div classc3123/div55 div classc324/div56 div classc3125/div57 div classc3126/div58 div classc327/div59 div classc328/div60 div classc329/div61 div classc330/div62 div classc331/div63 div classc332/div64 div classc333/div65 div classc334/div66 div classc335/div67 div classc336/div68 div classc337/div69 div classc338/div70 div classc339/div71 div classc339/div72 div classc340/div73 div classc341/div74 div classc342/div75 div classc343/div76 div classc344/div77 div classc345/div78 div classc346/div79 div classc347/div80 div classc348/div81 div classc349/div82 div classc350/div83 div classc351/div84 div classc352/div85 div classc353/div86 div classc354/div87 div classc355/div88 div classc356/div89 div classc357/div90 div classc358/div91 div classc359/div92 div classc360/div93 div classc361/div94 div classc362/div95 div classc363/div96 div classc364/div97 div classc365/div98 div classc366/div99 div classc367/div 100 div classc368/div 101 div classc369/div 102 div classc370/div 103 div classc371/div 104 div classc372/div 105 div classc373/div 106 div classc374/div 107 div classc375/div 108 div classc376/div 109 div classc377/div 110 div classc378/div 111 div classc379/div 112 div classc380/div 113 div classc381/div 114 div classc382/div 115 div classc383/div 116 div classc384/div 117 div classc385/div 118 div classc386/div 119 div classc387/div 120 div classc388/div 121 div classc389/div 122 div classc390/div 123 div classc391/div 124 div classc392/div 125 div classc393/div 126 div classc394/div 127 div classc395/div 128 div classc396/div 129 div classc397/div 130 div classc398/div 131 div classc399/div 132 div classc3100/div 133 134 button idb2 classbtn btn-default c2 hide返回顶部/button 135 script srcjquery-3.3.1.min.js/script 136 script 137 $(#b1).on(click,function(){ 138 $(.c1).offset({left:200,top:200}); 139 }); 140 $(window).scroll(function(){ 141 if ($(window).scrollTop()100){ 142 $(#b2).removeClass(hide); 143 }else{ 144 $(#b2).addClass(hide); 145 } 146 }); 147 $(#b2).on(click,function(){ 148 $(window).scrollTop(0); 149 }); 150 /script 151 /body 152 /html View Code 尺寸 height() width() innerHeight() //内容padding innerWidth() outerHeight() //内容padding边框 outerWidth() HTML代码 html() //取得第一个匹配元素的HTML 内容//js取值document.getElementById(d1).innerHTML h1注释是代码之母/h1//jquery方法$(#d1).html() 获取第一个html元素 html(val)// 设置所有匹配元素的HTML内容 $(#d1).html(h1永远不要高估自己/h1) //设置html 里的元素   文本值 text//取得所有匹配元素的内容document.getElementById(d1).innerText gay in gay out; # js方法 jquery 方法 $(#d1).text() //取得d1 标签的值$(#d1).text(gay 里gay 气) #设置#d1里的标签的值textval //设置所有匹配元素的内容 值 val() //取得第一个匹配元素的当前值例子$(input[nameusername]).val() val(val) //设置所有匹配元素的值例子$(input[nameusername]).val(egon dsd) val([val1,val2]) //设置checkbox,select 的值  示例获取被选中的checkbox 或radio 的值 label for “c1”女/label input namegender idc1 typeradio value0 label forc2男/labe input namegender idc2 typeradio value1可以使用$(input[namegender]:checked).val() 练习自定义登录校验示例 1 !DOCTYPE html2 html langzh-CN3 head4 meta charsetUTF-85 meta http-equivx-ua-compatible contentIEedge6 meta nameviewport contentwidthdevice-width, initial-scale17 title文本操作之登录验证/title8 style9 .error { 10 color: red; 11 } 12 /style 13 /head 14 body 15 16 form action 17 div 18 label forinput-name用户名/label 19 input typetext idinput-name namename 20 span classerror/span 21 /div 22 div 23 label forinput-password密码/label 24 input typepassword idinput-password namepassword 25 span classerror/span 26 /div 27 div 28 input typebutton idbtn value提交 29 /div 30 /form 31 script srchttps://cdn.bootcss.com/jquery/3.2.1/jquery.min.js/script 32 script 33 $(#btn).click(function () { 34 var username $(#input-name).val(); 35 var password $(#input-password).val(); 36 37 if (username.length 0) { 38 $(#input-name).siblings(.error).text(用户名不能为空); 39 } 40 if (password.length 0) { 41 $(#input-password).siblings(.error).text(密码不能为空); 42 } 43 }) 44 /script 45 /body 46 /html View Code 属性操作 用于ID等于或自定义属性 attr(attrName) //返回第一个匹配元素的属性值 例子$(#d1).attr(s1) //返回 s1 的值attributeattrName, attrValue) //为所有匹配元素设置一个属性值 例子$(#d1).attr(s1,great) //为s1设置属性值为greatattr({k1:v1,k2:v2})// 为所有匹配元素设置多个属性值 例子$(#d1).attr({num:50,tedian:gay}) //为d1 匹配多个属性值removeAttr() //从每一个匹配的元素中删除一个属性 例子$(#d1).removeAttr(tedian) //删除d1中tedian属性 用于checkbox 和radio prop()获取属性removeProp() // 移除属性 注意 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug在3.x版本的jQuery中则没有这个问题。为了兼容性我们在处理checkbox和radio的时候尽量使用特定的prop()不要使用attr(checked, checked)。 input typecheckbox value1 input typeradio value2 script$(:checkbox[value1]).prop(checked, true);$(:radio[value2]).prop(checked, true); /script 示例 全选反选 取消 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 title全选反选取消练习/title6 /head7 body8 9 button idb1全选/button 10 button idb2取消/button 11 button idb3反选/button 12 table border1 13 thead 14 tr 15 th#/th 16 th姓名/th 17 th爱好/th 18 /tr 19 /thead 20 tbody 21 tr 22 tdinput typecheckbox/td 23 tdEgon/td 24 td喊麦/td 25 /tr 26 tr 27 tdinput typecheckbox/td 28 tdAlex/td 29 td吹牛逼/td 30 /tr 31 tr 32 tdinput typecheckbox/td 33 tdYuan/td 34 td不洗头/td 35 /tr 36 /tbody 37 /table 38 script srcjquery-3.3.1.min.js/script 39 script 40 // 全选 41 $(#b1).click(function () { 42 // 让所有的checkbox选中 43 $(table :checkbox).prop(checked, true) 44 }); 45 // 取消 46 $(#b2).click(function () { 47 // 让所有的checkbox取消选中 48 $(table :checkbox).prop(checked, false) 49 }); 50 // 反选 51 $(#b3).click(function () { 52 // // 找到没有选中的让它们选中 53 // $(table input:not(:checked)).prop(checked, true); 54 // // 找到所有选中的让它们取消选中 55 // $(table input:checked).prop(checked, false); 56 57 // 方法1循环 58 var $checkboxs $(table input:checkbox); 59 // for (let i0;i$checkboxs.length;i){ 60 // var $currentCheckbox $($checkboxs[i]); 61 // if ($currentCheckbox.prop(checked)){ 62 // // 如果之前是选中的 63 // $currentCheckbox.prop(checked, false); 64 // }else { 65 // // 之前没有选中 66 // $currentCheckbox.prop(checked, true); 67 // } 68 // } 69 70 for (let i0;i$checkboxs.length;i){ 71 var $currentCheckbox $($checkboxs[i]); 72 var flag $currentCheckbox.prop(checked); 73 $currentCheckbox.prop(checked, !flag) 74 } 75 76 }); 77 78 /script 79 /body 80 /html View Code 文档处理 添加到指定元素内部的后面 $(A).append(B) //把B 追加到A的后面$(A).appendTo(B) //把A追加到B的后面 示例 var pEle document.createElement(p); pEle.innerText qqqqqqq;$(#d1).append(pEle) //把pEle追加到d1的后面 相同于 $(pEle).appendTo($(#d1)) //把pEle追加到d1 的后面   添加到指定元素 内部的前面 $(A).prepend(B) //把B前置到A$(A).prenpendTo(B) // 把A 前置到B 示例 var pEle document.createElement(p); pEle.innerText qqqqqqq;$(#d1).prepend(pEle) //把pEle 放到d1的前面 相等于 $(pEle).appendTo($(#d1)) //把pEle放到d1 前面 添加到指定元素外部的前面 $(A).before(B)//把B放到A 的前面(外部 $(A).insertBefore(B) //把A放到B 的前面外部 示例 var pEle document.createElement(p); pEle.innerText qqqqqqq;$(#p1).before(pEle) //把pEle追加到d1的前面 相同于 $(pEle).inserBedore($(#p1)) //把pEle追加到d1 的前面    添加到置顶元素外部的后面 $(A).after(B) //把B放到A 后面$(A).insertAfter(B) // 把A放到B 的后面  示例 var pEle document.createElement(p); pEle.innerText qqqqqqq;$(#p1).after(pEle) //把pEle追加到d1的后面 相同于 $(pEle).inserAfter($(#p1)) //把pEle追加到d1 的后面   移除和清空元素 remove// 从DOM 中删除所有匹配的元素 empyt() // 删除匹配的元素集合中所有的子节点例子$(#d1).empty() 替换 replaceWith() replaceAll()例子 var spanEle document.createElement(span); spanEle.innerText 呵呵;$(spanEle).replaceAll($(p)); //把spanEle替换到 P标签 克隆 clone()//参数 练习点击复制按钮 !DOCTYPE html html langzh-CN headmeta charsetUTF-8meta http-equivx-ua-compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1title克隆/titlestyle#b1 {background-color: deeppink;padding: 5px;color: white;margin: 5px;}#b2 {background-color: dodgerblue;padding: 5px;color: white;margin: 5px;}/style /head bodybutton idb1屠龙宝刀点击就送/button hr button idb2屠龙宝刀点击就送/buttonscript srcjquery-3.2.1.min.js/script script// clone方法不加参数true克隆标签但不克隆标签带的事件$(#b1).on(click, function () {$(this).clone().insertAfter(this);});// clone方法加参数true克隆标签并且克隆标签带的事件$(#b2).on(click, function () {$(this).clone(true).insertAfter(this);}); /script /body /html  转载于:https://www.cnblogs.com/lx3822/p/9140517.html