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>
时间： 2024-10-13 12:25:04