<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery学习技巧</title> <link rel="stylesheet" type="text/css" href="test.css"> <style> .hover{ background: #ddd; } </style> </head> <body> <h1>学习测试jquery</h1> <div style="border: 1px solid red;" > <a href="http://www.baidu.com" rel="external">打开链接</a> <input type="text" class="text1"/> <p id="XY"></p> <select id="element"> <option>小王</option> <option>小狗</option> <option>小猫</option> </select> <button>按钮</button> <input type="checkbox" value="1"/>1 <input type="checkbox" value="2"/>2 <input type="checkbox" value="3"/>3 </div> <table> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> </tr> </table> <div id="load">loading...</div> <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { //禁用页面的右键菜单 $(document).bind("contextmenu",function (e) { return false; }); //新窗口打开页面 $("a").attr("target","_blank"); //或者 $("a").click(function () { this.target = "_blank"; }); //输入框文字获取和失去焦点 $("input.text1").val("请输入"); textFill($("input.text1")); function textFill(input) { var original_value = input.val(); input.focus(function () { if($.trim(input.val()) == original_value){ input.val(''); } }).blur(function () { if($.trim(input.val()) == ''){ input.val(original_value); } }); } //获取鼠标位置 $(document).mousemove(function (e) { $("#XY").html("X:" + e.pageX + "| Y:" + e.pageY); }) //点击div也可以跳转 $("div").click(function () { window.location = $(this).find("a").attr("href"); //一定要加attr,否则报错404 return false; //防止点击超链接a做两次跳转 }); //根据浏览器的大小添加不同的样式 function checkWindowSize() { if($(window).width() > 1200){ $("body").addClass("large"); }else{ $("body").removeClass("large"); } } $(window).resize(checkWindowSize()); //设置div在屏幕中央 $.fn.center = function () { this.css("position","absolute"); this.css("top",($(window).height() - this.height())/2 + $(window).scrollTop() + "px"); this.css("left",($(window).width() - this.width())/2 + $(window).scrollLeft() + "px"); return this; } $("#XY").center(); //检测鼠标的右键和左键 $("#XY").mousedown(function (e) { alert(e.which); // 1 左键 2 中间 3 右键 }) //回车提交表单 $("input").keyup(function (e) { if(e.which == "13"){ alert("回车提交"); } }); //获取选中的下拉框 alert($("#element").find("option:selected").val()); $("#element option:selected"); //切换复选框 var tog = false; $("button").click(function () { $("input[type=checkbox]").attr("checked", !tog); tog = !tog; }); //在一段时间后自动隐藏或关闭元素 $("div").slideUp(300).delay(3000).fadeIn(400); // $("table").on("click","td",function () { $(this).toggleClass("hover"); }) }); </script> </body> </html>
整理的jquery使用技巧
最新推荐文章于 2022-02-23 17:07:17 发布