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>