• 周五. 12月 2nd, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

jquery 练习笔记

admin

11月 28, 2021
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .body{
  8             color: #0e90d2;
  9             height: 2000px;
 10         }
 11 
 12         .selected{
 13             color: red;
 14         }
 15         .size{
 16             font-size: 20px;
 17         }
 18 
 19         p{
 20             border: 1px solid red;
 21             /*height: 0px;*/
 22         }
 23         .entered{
 24             background-color: #ffff99;
 25         }
 26         .highlight{
 27             background-color: springgreen;
 28         }
 29 
 30     </style>
 31 </head>
 32 <body>
 33     <select id="single">
 34       <option>Single</option>
 35       <option>Single2</option>
 36     </select>
 37     <select id="multiple" multiple="multiple">
 38       <option selected="selected">Multiple</option>
 39       <option>Multiple2</option>
 40       <option selected="selected">Multiple3</option>
 41     </select><br/>
 42     <input type="checkbox" value="check1"/> check1
 43     <input type="checkbox" value="check2"/> check2
 44     <input type="radio" value="radio1"/> radio1
 45     <input type="radio" value="radio2"/> radio2
 46 
 47 
 48     <p><input type="text" /> <span>focusout fire</span></p>
 49 <p><input type="password" /> <span>focusout fire</span></p>
 50 
 51 <button id="old">.trigger("focus")</button>
 52 <button id="new">.triggerHandler("focus")</button><br/><br/>
 53 <input type="text" value="To Be Focused"/>
 54 
 55     <div class="body">
 56         <h1>登录表单</h1>
 57         <form id="[search]" action="https://www.sogou.com/web" name="query">
 58             <br id="br">
 59             <p>用户名:<input id="user" name="user" type="text"></p>
 60             <p>密码:<input name="pwd1" type="password"></p>
 61             <div>test</div>
 62             <p>确认密码:<input name="pwd2" type="password" ></p>
 63             <span>dd</span>
 64             <input type="checkbox" />
 65             <input type="submit" value="登录">
 66             <input type="reset" value="重置">
 67             <span>test</span>
 68             <label></label>
 69 
 70 
 71         </form>
 72         <h2>登录</h2>
 73     </div>
 74     <div id="n1">
 75         <p id="n2" class="demo test" data-key="UUID" data_value="1235456465">CodePlayer</p>
 76     </div>
 77     <script src="jquery-2.2.3.js"></script>
 78 
 79     <script>
 80         //选择器
 81 //        $("#\[search\]").submit(); //通过#操作对应ID的元素
 82 //        console.log($('#\[search\]')); //匹配特殊字符的ID
 83 //        console.log($('input'));  //通过元素名称匹配选择标签
 84 //        console.log($('.body')); //通过搜索应用的类选择标签
 85 //        console.log($("*")); //找到所有的元素
 86 //        console.log($(".body ,#\[search\] , input:text")); //一次性匹配多个元素,一:应用了css类body的元素;二:id为[search]
 87 //        的元素;三:input属性为text的元素,注意,如果是查找某个元素自身的属性,中间不能有空格,如果是查找某个元素下子元素包含这个属性的元素,需要空格
 88 //        console.log($('form :password')); //:为找属性值为某种类型的元素,
 89 //        console.log($('form > input'));  //查找子级同级别为input元素
 90 //        console.log($("p + input"));  //查找p标签后紧跟input的这个input标签,非p标签的子级,同级关系
 91 //        console.log($("p ~ input"));  //找到所有与p标签同级的INPUT标签
 92 //        console.log($('input:first')); //查找第一个input标签
 93 //        console.log($("input:not(:password)")); //查找所有input标签除了属性是密码类型的input标签
 94 //        console.log($("input:even"));  //匹配所有input标签顺序是偶数的,从0开始
 95 //        console.log($("input:odd"));  //匹配所有input标签索引是奇数的,下标从0开始
 96 //        console.log($("input:eq(2)")); //匹配所有input标签,且下标为2
 97 //        console.log($("input:gt(2)")); //匹配所有input标签,且下标大于2
 98 //        console.log($("input:last")); //匹配所有INPUT标签,索引排序最后的一个
 99 //        console.log($("input:lt(2)")); //匹配索引input标签,且索引小于2
100 //        console.log($(":header")); //匹配所有标题元素,如h1,h2...
101 //        console.log($("form:has(p)"));  //查找所有包含p标签的form元素,
102 
103         //筛选
104 //        console.log($("p").eq(1)); //获取所有P标签,下标为1的jquery对象,类似于get(index),但是get返回的dom对象
105 //        console.log($("p").first());  //获取所有P标签,下标为0的元素
106 //        console.log($("input").last());  //获取所有input标签中最后一个元素
107 
108 //        console.log($('form').children()); //匹配form元素下所有的子标签,注意,不包括子元素下的子标签
109 //        console.log($("p").find("input"));  //搜索所有P标签下包含input的input元素,与$("p input")相同
110 //        console.log($("p").next());  //返回所有p标签后面紧邻的每一个同级元素的第一个元素,
111 //        console.log($("p").nextAll());  //返回所有与第一个p标签同级的后面所有同级标签
112 //        console.log($("p").nextUntil("input"));  //查找到第一个P标签后,开始.从P标签后面的所有标签到遇到input标签为止的区间标签
113 //        console.log($('p').parent());  //查找所有P标签的父元素
114 //        console.log($("input").parents('p'));  //查找所有input标签的父标签是p的p元素
115 //        console.log($("input").parentsUntil('form'));  //查找所有input标签的祖先标签到form标签为止就不查了,注意,不能将util到父标签,这样就是除了父标签的所有祖先标签
116 //        console.log($("p").prev());  //获取每一个包含P标签的同级的前一个元素集合
117 //        console.log($("p").prevAll()); // 获取最后一个P标签之前对所有同级标签
118 //        console.log($("p").prevUntil('#br'));  //获取最后一个P标签之前的所有同级元素,到id为br元素后一个为止
119 //        console.log($("input").siblings());  //将input标签的同辈所有标签获取,如果同辈标签含有INPUT子标签,则优先找父辈标签
120 
121         //属性
122 //        console.log($("input").attr({style:"color:red;"}));
123         // $("p").attr("style","color:red;");//对指定标签设置属性
124 //        console.log($("input").attr("style"));  //获取某个元素对属性值
125 //        console.log($("p").removeAttr("style")); //移除指定标签对样式属性值
126 //        console.log($("input[type='text']").prop("name")); //获取指定标签对name属性值
127 //        $("input[type=checkbox]").prop('checked',true);  //设置指定标签属性
128 //        $("input[type=checkbox]").prop({'style':"height:40px"});  //设置指定标签属性
129 
130 
131 //         var $x = $("label");
132 //        $x.prop("check","checked");
133 //        $x.append("<input type='checkbox'  "+$x.prop("check")+"/>");  //查看并设置添加属性
134 //        $x.removeProp("check");  //移除属性
135 //        $x.append("<input type='checkbox'  "+$x.prop("check")+"/>");  //移除后,属性变为为定义
136 
137 
138 
139 //        console.log($("p").addClass("selected"));//添加一个样式
140 //        $("p").addClass("selected size");//添加多个样式
141 //        console.log($("p").removeClass("selected"));  //移除一个样式
142 
143 //        console.log($("p").html("<br/>")); //这样做会直接覆盖原来的标签
144 //        (function () {
145 //            var tag_list = $("p").html();
146 //            console.log(tag_list);
147 //                var before = tag_list;
148 //                console.log(before);
149 //                $("p").html(before + "<br/>");
150 //        })();
151 //
152 //        $("p").html(function(n){
153 //    return "这个 p 元素的 index 是:" + n;
154 //    });
155 
156 
157 //        console.log($("p").text('hao')); //修改p标签内部的文本内容
158 //        $("p").text(function (index,text) {  //此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。
159 //            return "hao"+text;
160 //        });
161 
162 
163 //        console.log($("p input").val('h'));
164 //        $("p input").val(function (index,value) {//此函数返回一个要设置的值。接受两个参数,index为元素在集合中的索引位置,text为原先的text值
165 //            return "hello" + value;
166 //        });
167 //        $('input:text.items').val(function() {
168 //  return this.value + ' ' + this.className;
169 //});
170 //        $("#single").val("Single2");
171 //$("#multiple").val(["Multiple2", "Multiple3"]);
172 //$("input").val(["check2", "radio1"]);
173 
174 
175 //        $("#single").val("Single2");
176 //$("#multiple").val(["Multiple2", "Multiple3"]);
177 //$("input").val(["check2", "radio1"]); //将value值对应check2,radio1选中
178 
179 
180 //        console.log($("p").css('color')); //获取所有P标签的CSS颜色
181 //        $("p").css('color','red');//设置颜色
182 //        $("p").css({'color':'red','font-size':'24px'});//设置颜色并设置字体大小
183 //        $("p").click(function () {
184 //            $(this).css({
185 //                color:"red", //当单击事件时,颜色变红
186 //                "font-size": function (index,value) {
187 //                    return parseFloat(value) * 1.5;
188 //                }
189 //            })
190 //        });
191 
192 //        var p = $("p:last"); //获取最后一个p标签
193 //        p.offset({top:90,left:500});
194 ////        var offset = p.offset();//获取坐标值top:value,left:value
195 //        p.html( "left: " + p.offset().left + ", top: " + p.offset().top );
196 //        console.log(offset);
197 
198 //        console.log($("form").offset());
199 //
200 //        var p = $("p:first");
201 //        var position = p.position(); //Object {top: 186.875, left: 8} //仅仅用来获取元素的偏移
202 //        p.html("left:"+position.left+",top"+position.top);
203 //
204 //        console.log(position);
205 
206 //        $("p:first").scrollTop(900);
207 //        $("p:first").scrollLeft(70);
208 //        console.log($("p:first").scrollTop()); //获取匹配元素相对滚动条的偏移,此方法对可见和隐藏元素均有效。
209 
210 
211 //        console.log($("p").height()); //获取指定P元素的高度
212 //        $("p").height(30); //设定p元素的高度
213 //        $("input").click(function () {
214 //            $(this).height(function (index,height) {
215 //                return height + 300;
216 //            })
217 //        });
218 
219 
220 
221 //        $("p").width(30); //设定p元素的高度
222 //        $("input").click(function () {
223 //            $(this).width(function (index,width) {
224 //                console.log($(this).width());
225 //                return width + 3000000;
226 //            })
227 //        });
228 //        console.log($("p").width()); //获取指定P元素的宽度,相对于当前窗口而言,因为P是块标签
229 
230 
231 
232 //        console.log($("p:last").innerHeight()); //获取p标签内部高度
233 //        console.log($("p:last").innerWidth()); //获取P标签的内部宽度
234 //        var p = $("p:first");
235 //        console.log(p.outerHeight(),p.outerHeight(true));  //获取标签外部高度,包括补白和边框,理解不够透???
236 //        console.log($("p:first").outerWidth()); //算上边框和补白
237 //        console.log($("p:first").outerWidth(true));
238 //        $("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );
239 
240 
241 //内部插入
242 //        console.log($("p").append("<b>hello</b>"));  //指定元素添加新元素,在p元素里添加新元素
243 
244 
245 //        console.log($("p").appendTo("#n2"));  //将所有的P标签添加到IDn2元素内
246 
247 
248 //        console.log($("p").prepend("<b>hello</b>"));  //将元素插入到P元素内部的前面
249 
250 //        console.log($("p").prependTo("#n2"));  //将p元素插入到idn2元素内的前面
251 
252 
253 
254 
255 //        console.log($("p").after("<b>hello</b>")); //在每个P标签后插入一个新元素.外部插入
256 
257 //        console.log($("p").before("<b>hello</b>"));  //在每个P标签前面插入一个新元素,外部插入
258 //        console.log($("p").insertAfter("#n2"));  //将所有P标签插入到ID N2后,外部插入
259 //        console.log($("p").insertBefore("#n2"));  //将所有P标签插入到ID N2前,外部插入
260 
261 
262 //        console.log($("p").empty());  //清空所有P标签内部内容
263 //        console.log($("p").remove());  //将匹配的P标签从DOM里删除,
264 //        console.log($("p").detach());  //与remove类似,但是它会保留所有绑定的事件,附加数据等
265 //        console.log($("p input").detach());
266 //        console.log($("p").clone());
267 //        console.log($("p").clone(true));  //clone默认参数false,指事件处理函数是否被复制
268 //        console.log($("p").clone().prependTo("#n2"));  //将所有等P标签克隆一份并插入到ID N2内部前面
269 
270 
271 
272         //事件
273 //        $(":checkbox").ready(function () {
274 //            $(":checkbox").prop("checked",true); //注意,这里不能使用this,
275 //            $(":radio").attr("checked","checked")
276 //        });
277 
278 
279 //        console.log($("p").on("click",function () {
280 //            alert('ok')
281 //        }));
282 //        $("p").off( "click", "**" );
283 //        function myHandler(event) {
284 //            alert(event.data.do);  //弹出事件消息
285 //        }
286 //        $("p").on("click", {do: "bar"}, myHandler); //定义事件消息do
287 //
288 //        $("p").on("click", function(){
289 //            alert( $(this).text() ); //触发点击鼠标事件时,显示p标签对文本内容
290 //        });
291 //
292 //        $("form").on("submit", false);  //在提交表单时触发提交事件
293 
294 
295 //        $("p").off();  //移除P标签上所有事件,
296 //
297 //        var foo = function () {
298 //            alert($(this).text);
299 //            // code to handle some kind of event
300 //        };
301 //
302 //        // ... now foo will be called when paragraphs are clicked ...
303 //        $("body").on("click", "p", foo);
304 //                // ... foo will no longer be called.
305 //        $("body").off("click", "p", foo);
306 
307 
308 
309 //        var validate = function () {
310 //          // code to validate form entries
311 //            alert('hello');
312 //        };
313 //
314 //        // delegate events under the ".validator" namespace
315 //        $("form").on("click.validator", "button", validate);  //绑定button元素鼠标点击事件,
316 //
317 //        $("form").on("keypress.validator", "input[type='text']", validate);
318 //
319 //        // remove event handlers in the ".validator" namespace
320 //
321 //        $("form").off(".validator"); //移除所有这个命名空间事件
322 
323 
324 
325         //bind
326 
327 //        $("p").bind("click", function(){
328 //            alert( $(this).text() );  //绑定p标签上的click事件,然后执行相应处理方法
329 //        });
330 
331 //        $('#n2').bind('mouseenter mouseleave', function() {
332 //            $(this).toggleClass('entered');  //绑定多个事件,当鼠标放到指定位置,就添加相应的css类,当鼠标移走,触发离开事件,toggleClass判断如果指定的CSS类存在就删除,不存在就添加
333 //        });
334 //
335 //          var count = 1;
336 //          $("p").click(function(){
337 //              $(this).toggleClass("highlight", count++ % 3 == 0);  //每点击3次触发一次点击事件
338 //          });
339 
340 //        $("form").bind("submit", function() { return false; })
341 
342 //        $("form").bind("submit", function(event){
343 //          event.preventDefault();  //取消默认行为
344 //        });
345 //
346 //        $("form").bind("submit", function(event){
347 //          event.stopPropagation();  //阻止一个事件起泡,当
348 //        });
349 //
350 //        function handler(event) {
351 //          alert(event.data.foo);
352 //        }
353 //        $("p").bind("click", {foo: "bar"}, handler);
354 //
355 //        $("button").bind({
356 //          click:function(){$("p").slideToggle();},
357 //          mouseover:function(){$("body").css("background-color","red");},
358 //          mouseout:function(){$("body").css("background-color","#FFFFFF");}
359 //        });
360 
361 
362 //        $("p").one("click", function(){  //当鼠标第一次点击时,触发一次事件,再次点击不触发
363 //          alert( $(this).text() );
364 //        });
365 
366 //        $("form:first").trigger("submit");  //不用通过submit,只要执行这个代码,自动提交表单
367 
368 //        $("p").click( function (event, a, b) {
369 //          // 一个普通的点击事件时,a和b是undefined类型
370 //          // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
371 //            console.log(a,b);
372 //        } ).trigger("click", ["foo", "bar"]);
373 
374 //        $("p").bind("myEvent", function (event, message1, message2) {  //p标签绑定事件,触发一个hello world消息
375 //          alert(message1 + ' ' + message2);
376 //        });
377 //        $("p").trigger("myEvent", ["Hello","World!"]);
378 
379 
380 //        $("#old").click(function(){
381 //          $("input").trigger("focus");  //会触发默认事件
382 //        });
383 //        $("#new").click(function(){
384 //          $("input").triggerHandler("focus"); //只触发你绑定的动作,,浏览器默认动作不触发
385 //        });
386 //        $("input").focus(function(){
387 //          $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
388 //        });
389 //
390 //        $("input").unbind();  //从每一个匹配的元素中删除绑定的事件
391 
392 
393 //        $("p").blur();
394 //        $("p").blur( function () { alert("Hello World!"); } );  //当元素失去焦点时触发 blur 事件。
395 
396 
397 //        $("input[type='text']").change( function() {  //当元素的值发生改变时,会发生 change 事件
398 //            alert(22);
399 //        // 这里可以写些验证代码
400 //        });
401 
402 //        $("p").click( function () { $(this).hide(); });  //将页面内所有段落点击后隐藏。
403 //
404 ////        $("p").dblclick( function () { alert("Hello World!"); }); //给页面上每个段落的双击事件绑上 "Hello World!" 警告框
405 //
406 //
407 //        $(window).error(function(){  //隐藏JavaScript错误:
408 //          return true;
409 //        });
410 //
411 //        $("img").error(function(){  //给你IE的用户隐藏无效的图像:
412 //          $(this).hide();
413 //        });
414 //
415 //
416 //        $(window).error(function(msg, url, line){  //在服务器端记录JavaScript错误日志:
417 //          jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
418 //        });
419 
420 
421         //当元素获得焦点时,触发 focus 事件。
422 //        $(document).ready(function(){  //当页面加载后将 id 为 'user' 的元素设置焦点:
423 //          $("#user").focus();
424 //        });
425 //
426 //        $("input[type=text]").focus(function(){
427 //          this.blur();  //使人无法使用文本框:
428 //        });
429 //当元素获得焦点时,触发 focusin 事件。
430 
431 //获得焦点后会触发动画:
432         $("p").focusin(function() {
433           $(this).find("span").css('display','inline').fadeOut(1000);
434         });
435 
436 
437 //        当元素失去焦点时触发 focusout 事件。
438         $("p").focusout(function() {
439           $(this).find("span").css('display','inline').fadeOut(1000);
440         });
441 
442 
443 //        当键盘或按钮被按下时,发生 keydown 事件。
444         $(window).keydown(function(event){
445           switch(event.keyCode) {
446             // ...
447             // 不同的按键可以做不同的事情
448             // 不同的浏览器的keycode不同
449             // 更多详细信息:     http://unixpapa.com/js/key.html
450             // 常用keyCode: 空格 32   Enter 13   ESC 27
451           }
452         });
453 
454     </script>
455 </body>
456 </html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注