免费建自己域名的网站,个人网站 程序,网站免费正能量软件不良,宁波网站制作设计---恢复内容开始--- 操作标签 样式操作 样式类 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
