jQuery:总体掌握
链式编程。...方法多,属性无法得到对象进行链式。vs10自动完成、书籍锋利的jQuery
vsdoc有智能提示开发时候用,开发完之后,换成min压缩版的。
经验:打开网站文件夹。可以把vs网站上的解决方案另存到和网站文件夹同一个文件夹中,直接打开.sln就能打开同一文件夹中的网站。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。文档流。body可能很小哦可以就包含一个层..,不能把document当成body。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () {//$(document).ready(function(){ ... }) alert('000'); })//最先执行,DOM元素创建完成之后就会执行,不管js css 图片加载的事情。 window.onload = function () { alert("111"); } //不会执行!!!!onload只能注册一次。 在前面js介绍中讲述了追加方法; window.onload = function () { alert("222"); } //js css 图片加载完成才执行 </script> </head> <body> <form id="form1" runat="server"> <div> ddd </div> </form> </body> </html>
常用方法
1,修改(行内)样式 style="'background':'red;....'"2,类样式 .m{}
2016/08/16补充
children()
函数只在当前jQuery对象匹配元素的所有子元素中查找,不会查找"孙子"以及更后代的元素。
find()
函数只在当前jQuery对象匹配元素的所有后代元素中查找,包含查找"孙子"以及更后代的元素。
所以find()查找的就包含children()查找的,除非特殊只在孩子元素找,不在孙子等找。
//所有子元素中查找,只从孩子元素中查找,不在孙子及以后查找 // 这里的selector、selector1均表示任意的选择器 $("selector").children("selector1"); // 等价于 $("selector > selector1"); $("selector").children( ); // 等价于 $("selector > *"); //所有后代元素,包括孩子、孙子、重孙子、、等 // 这里的是selector、selector1均表示任意的选择器 $("selector").find("selector1"); // 等价于 $("selector selector1"); //当前对象,不是包含的子元素的第一项! first()函数用于获取当前jQuery对象所匹配的元素中的第一个元素,并返回封装该元素的jQuery对象。 $( "selector" ).first( ); //等价于 $( "selector:first" ); //等价于 $( "selector:eq(0)" ); //等价于 $( "selector" ).eq( 0 );
//兄弟元素 $("#d1").siblings().css("background-color", "red"); //获取兄弟节点sibling()之后也是jquery对象.链式 $("#d1").siblings("input").css("background-color", "green"); // input选择器,也可以是id //后面兄弟元素 $("#d1").next().css("background-color", "green"); //获取第一个兄弟节点。紧挨着的兄弟节点 $("#d1").nextAll("input").css("background-color", "green"); //获取之后的符合input选择器的所有兄弟节点 $("#d1").nextAll("#i2").css("background-color", "gray"); //前面兄弟节点 $("#d2").prev("div").css("background-color", "gray"); //第一个 $("#d2").prevAll().css("background-color", "gray"); //所有 $("#d2").prevAll("div").css("background-color", "gray"); //所有符合div selector //子元素 $("#d1").children("#z1,#z2").attr("value", "内容"); //父元素 $("#z1").parent().css("background", "gray");
<script type="text/javascript"> $(function () { $("#d1").css("background", "red"); //red也有双引号 修改样式 alert($("#d1").css("background")); //获取样式 $("d2").css("background", $("#d1").css("background")); $("#i1").val("2222"); //写val() var v = $("#i1").val(); //读val() alert(v); $("#d2").text("p标签的内容text而不是val"); //向div p但不能向input写文本 text()屏蔽了ie firefox的不同 var t = $("#d2").text(); //读文本 alert(t); //$("#i1").text("p标签的内容text而不是val")//不能给input用text()写。 $("#d3").html("p标签的内容text而不是val"); //写文本 $("#d4").html("<input type='text'/>"); //html()可以向div写内容,也可以写节点 $("#d4")[0].innerText = "包装集【0】转化成dom对象"; //jquery中,js对象点不出js对用的属性等成员. $("#d4")[0].innerHTML = "包装集【0】转化成dom对象"; }); window.onload = function () { var d = document.getElementById("d4"); d.innerText = "0000"; //innerText属性在Firefox不能用,点不出来 d.innerHTML = "11111"; var i = document.getElementById("i1"); i.value = "111111111"; //给input文本框写值 var $div = $("d"); //将一个dom对象转换成一个jquery对象$(dom) $div.text("111"); ////js中,jquery对象能点出js对用的属性等成员. $div.html("1111"); }; </script>
<style type="text/css"> .m { background-color: Red; } .n { width: 400px; } .l { filter: gray; } </style> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // //css()和attr() // $("#d2").attr("style", "background:green;width:100px;height:200px"); // $("#d2").attr({ "style": "background:green;width:100px;height:200px" }); // //css() attr()为style多个值赋值,用到json // $('#d2').css({ 'background-color': 'red', width: 100, height: 200 }); //赋值 // //获取那个属性,带上对应key // alert($("#d2").css('background-color')); // $("#d2").attr({ "style": "background:green;width:100px;height:200px" }); // //css()不能自定义个属性,生成style=”“,不能加进去的 // //$("#d2").css('abcc', 'asdfd'); //错误 // //attr()是能加进去的 // $("#d2").attr('abcc', 'asdfd'); // //css()方法中backgroundColor一般第2个首字母大写,和style属性background-color不一样 // //但是验证background-color是行的,backgroundcolor不行。看jquery源码有正则处理 // $('#d2').css('backgroundColor', 'red'); // $('#d2').css('background-color', 'red'); // //div没有bgcolor属性,body中有 // // $('#d2').css('bgcolor', 'red'); //这种是错误的 style="bgcolor:red;...." // $('#d2').css('bgcolor', 'red'); //改变类样式, 没有点.....只写类样式的名字 $("#d2").attr("class", "m"); // //追加类样式 $("#d2").addClass("n"); // class="m n" //删除类样式 $("#d2").removeClass("n"); //切换(存在样式,去掉,没有样式添加) 点击再点的时候 $("#btnMis").click(function () { $("body").toggleClass("m"); //ie反应慢 在google检验 if ($("body").hasClass("m")) { $("#btnMis").val("关灯") } else { $("#btnMis").val("开灯") } }) }) </script>
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.7.1.js"></script> <script type="text/javascript"> $(function () { var ele = $(" <div id='insertDiv' style='width:200px;height:200px;background-color:green'></div>") //$('#divdemo').append(ele); //添加(1) ele.appendTo($('#divdemo'));//向一个div添加(2)。创建一个动态创建的元素(1) ele.text("aaa");//向$jquery对象写一句文字 ele.html("<div id='inserted2' style='width:100px;height:100px;background-color:blue'></div>")//动态添加一个元素,直接插入html(2) }) // $(document).ready(function () { }) = $(function () { })//这里面的function可以写一个方法名(不带括号) //$(document).ready(fun) =$(fun) </script> </head> <body> <div id="divdemo" style="width: 400px; height: 400px; background-color: red"> </div> </body> </html>
选择器
//$("p.intro") 选取所有 class="intro" 的 <p> 元素
//$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
//相对定位,在$对象中查找 $()选择之后都编程jquery对象
//选择器的组合都在“”内完成。而相对定位$("选择器组合",$对象)
1 <script type="text/javascript"> 2 $(function () { 3 //相对定位,在$对象中查找 $()选择之后都编程jquery对象 4 5 //基本 6 //类,id 元素标签(节点名 p div input) 7 $(".i5").val("111"); 8 $("#i1").css("background-color", "red"); 9 $("input").attr("value", "11111111111111"); //注意不是表单选择器,:input虽然功能结果一样 10 $(":input").attr("value", "11111111111111"); 11 12 13 //层次 后代(空格 >)和兄弟(+ ~) 14 15 //子 子后代..."选择器 空格 选择器" 16 $("form p").css("background", "red"); //空格 所有符和第2个选择器的元素 后代 子 子后代... 17 $("#f p").css("background", "red"); 18 19 //>直接后代> "选择器 > 选择器" >两边有木有空格都行 20 //只在后代中找符合第二个选择器的元素,不能在子子后代..中找 21 $("#f>p").text("tttttt"); //p中不能包含p html 22 23 //兄弟 24 //+之后的紧挨的第一个元素,如果紧挨的第一个元素 不符合选择器,就不会找到 25 $("#i1 + #i3").val("mmm"); //这样就会找不到 紧挨着的符合选择器 26 $("#i1 + #i2").val("mmm"); //这样行 27 28 //兄弟 29 //~之后的所有符合选择器的元素 从后面兄弟节点中找,后面兄弟节点子节点的元素即使符合,也选不中 30 $("#i1 ~ p").css("background", "red"); 31 32 33 //,复合选择器 CSS中也有复合选择器 34 $("#i1,.i5,div").css("background", "blue") 35 36 37 // $(":input:not(:first)").attr("value", "222"); 38 }) 39 </script> 40 </head> 41 <body> 42 <input type="text" name="name" value=" " /> 43 <form action="/" method="post" id="f"> 44 <input type="text" name="name" value=" " id="i1" /> 45 <input type="text" name="name" value=" " id="i2" /> 46 <input type="text" name="name" value=" " id="i3" /> 47 <input type="button" name="name" value=" " id="i4" /> 48 <input type="button" name="name" value=" " class="i5" /> 49 <p id="p1" class="p"> 50 ppp1p1ppp1p1pppp1p1p1p1pp块元素占用一行 51 </p> 52 <div> 53 <p> 54 子子后代</p> 55 </div> 56 <p id="p2" class="p"> 57 p2pp2ppp2ppp2pppp2pp2pppp块元素占用一行 58 </p> 59 <input type="text" name="name" value=" " /> 60 </form> 61 </body>
// //属性过滤器,多属性【】【】 开始^= 结尾$= 不等!= 含有*= // //代替后面的表单选择器 $("input[type='text']").val("阿斯达"); $("input[type='text'][name='n2']").val("11111"); $("input[id='i1']").css("background", "green"); $("input[name^='n']").val("22222"); $("input[name$='2']").val("22222"); $("input[id!='i2']").val("22222"); $("input[name*='b']").val("22222"); //含有这个字母的都
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <style type="text/css"> </style> <script type="text/javascript"> $(function () { //表单选择器 //:input 包括 <input> <checkbox><textarea> <select> <option><button>所有的表单元素 $("input")只获取<input>标签 $(":input").css("background", "red"); //$(":text") 和属性选择器$("input[type=text]")等价 //:password :radio :checkbox :submit :image :reset :file :hidden :button // :diabled :checked :selected 表单可以和限制条件一块使用。 // 禁用的 $("input[type='text']:disabled").css("background", "red"); //选中 单选radio多选checkbox 为checked="checked" 下拉列表 的选象option selected="selected" $("input[type=checkbox]:checked").css("background", "red"); //浏览器不好观察 $("input[type=checkbox]:checked").removeAttr("checked"); $(":text:disabled[name!=i2]").css("background", "red"); $("select option").css("background", "red"); //单选 多选框包装集 需要each(function(){ this是这个包装集中每个DOM对象 }) $对象.each this表示DOM var i = ""; $(":checkbox:checked").each(function () { i += $(this).val(); }) alert(i); alert($("input[type=checkbox]:checked:eq(1)").val()); alert($(":checkbox:eq(1)").attr("checked")); //alert的true不是checked alert($(":checkbox:eq(1)").val()); //给radio和check赋值val中val(["",""]) //选中 2中方法 $(":radio:eq(1)").attr("checked", "true"); $(":radio:eq(1)").attr("checked", "checked"); //checked true都可以,一般用true,比如没选中 就fasle了对应的 $(":radio:eq(1)").val(["mm"]); //可以给radio和checkbox的value用val([""])的方法赋值原来就存在的值,表示选中 $(":checkbox[value='m']").val(['m']); }) </script> </head> <body> <input type="text" name="name" value=" " /> <form action="/" method="post" id="f"> <input type="text" name="n1" value=" " id="i1" /> <input type="text" name="n2" value=" " id="i2" /> <input type="text" name="n3" value=" " id="i3" /> <input type="text" name="3nbbb" value=" " id="Text1" /> <input type="button" name="n4" value=" " id="i4" /> <input type="button" name="n5" value=" " class="i5" /> <p id="p1" class="p"> ppp1p1ppp1p1pppp1p1p1p1pp块元素占用一行 </p> <div> <p> 子子后代</p> </div> <p id="p2" class="p"> p2pp2ppp2ppp2pppp2pp2pppp块元素占用一行 </p> <input type="text" name="i1" value=" " disabled="disabled" /> <input type="text" name="i2" value=" " disabled="disabled" /> <input type="radio" name="r1" value="dd" />radio1单选 <input type="radio" name="r1" value="mm" />radio2单选 <input type="checkbox" name="c1" value="1 " checked="checked" />checkbox1多选 <input type="checkbox" name="c1" value="2" checked="checked" />checkbox2多选 <input type="checkbox" name="c1" value="3 " checked="checked" />checkbox3多选 <input type="checkbox" name="c1" value="4 " />checkbox4多选 <input type="checkbox" name="c1" value="m" />checkbox4多选 <select> <option value="1">下拉1</option> <option value="2">下拉2</option> </select> </form> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <title></title> <script type="text/javascript"> //$("tr:first") 选择所有tr元素的第一个 //$("tr:last") 选择所有tr元素的最后一个 //$("tr:even") 选择所有的tr元素的第0,2,4... ...个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始) //$("tr:odd") 选择所有的tr元素的第1,3,5... ...个元素 //$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素 //$("td:gt(4)") 选择td元素中序号大于4的所有td元素 //$("td:ll(4)") 选择td元素中序号小于4的所有的td元素 //$(":header") //$("div:animated") $(function () { $(":text:first").css("background", "red"); $(":text:last").css("background", "green"); $(":text:not(:first)").val("11"); $(":text:odd").css("width", "50px") $(":text:lt(1)").css("height","30px"); $(":text:gt(7)").css("height", "30px"); $(":text:eq(1)").css("height", "60px"); }) </script> </head> <body> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> <input type="text" name="name" value="" /> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <!-- $("div:contains('John')") 选择所有div中含有John文本的元素 $("div:has(p)") 选择所有含有p标签的div元素 $("td:empty") 选择所有的为空(也不包括文本节点)的td元素的数组 $("td:parent") 选择所有的以td为父节点的元素数组 --> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // $("div:contains('李可')").css("background", "red"); // $("div:has('p')").css("background", "green"); // $(":text:empty").val('dasda'); $("div:parent").css("background", "red"); }) </script> </head> <body> <div> 李可是大牛 </div> <div> 李是可大牛 </div> <div> 大牛的可李 </div> <div> <p> ppppp</p> </div> <div> <input type="text" name="name" value=" " /> </div> <div> </div> <div> <br /> </div> <div> 2222 </div> <input type="text" name="name" value=" " /> </body> </html>
可视过滤器:hidden :visible当成基本过滤器就好了
//后代过滤器不常用
append ..remove appendto 权限 bind() 注意一下。
$.each(json,function(){this表示json的一个键值对的值!!! })
事件冒泡
从外到里
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function () { 8 // mouseout 和mouseover都会有事件冒泡从外到里的事件冒泡 9 var i = 0; 10 // $("#d1").mouseover(function () { 11 // i++; 12 // //$("#d1").text(i);// 大div 会把包含的小div去掉 13 // $("#d2").text(i); 14 // }) 15 // $("#d1").mouseout(function () { 16 // i++; 17 // //$("#d1").text(i);// 大div 会把包含的小div去掉 18 // $("#d2").text(i); 19 // }) 20 21 22 // mouseenter和mouseleave没有 23 $("#d1").mouseenter(function () { 24 i++; 25 //$("#d1").text(i);// 大div 会把包含的小div去掉 26 $("#d2").text(i); 27 }) 28 $("#d1").mouseleave(function () { 29 i++; 30 //$("#d1").text(i);// 大div 会把包含的小div去掉 31 $("#d2").text(i); 32 }) 33 }) 34 </script> 35 </head> 36 <body> 37 <div id="d1" style="width: 300px; height: 300px; border: 1px solid"> 38 <div id="d2" style="width: 100px; height: 100px; border: 1px solid"> 39 </div> 40 </div> 41 </body> 42 </html>
从里到外
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 window.event 8 $(function () { 9 $("#d1").click(function () { 10 alert("11"); 11 }) 12 $("#d2").click(function () { 13 alert("22"); 14 }) 15 // $("#d3").click(function () { 16 // alert("33"); //当内元素和外元素具有同样的事件,点击内元素,外元素也会执行 这就是从里到外的事件冒泡 17 // }) 18 19 20 //阻止外元素的事件执行 21 $("#d3").click(function (e) { 22 alert("33"); 23 //window.event.cancelBubble = true;//第一种方法。用js中的方法 24 //return false;//第二种方法 25 e.stopPropagation(); //第三种方法 26 }) 27 //e事件的对象==鼠标 键盘的相关信息 比如鼠标的position 28 29 }) 30 </script> 31 </head> 32 <body> 33 <div id="d1" style="width: 300px; height: 300px; border: 1px solid"> 34 <div id="d2" style="width: 200px; height: 200px; border: 1px solid"> 35 <div id="d3" style="width: 100px; height: 100px; border: 1px solid"> 36 </div> 37 </div> 38 </div> 39 </body> 40 </html>
阻断默认行为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // $("a").click(function () { // alert("11"); // }); $("a").click(function (e) { alert("11"); // return false; //中断,不再往下执行a标签的连接地址 e.preventDefault(); }); $(":submit").click(function (e) { alert("不要action"); // return false; e.preventDefault(); }); }) </script> </head> <body> <a href="http://www.cnblogs.com/leee/">a标签当按钮</a> <form action="http://www.cnblogs.com/leee/" method="post"> <input type="submit" name="name" value="提交" /> </form> </body> </html>
获取当前对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // $("#d1,#d2,#d3").click(function () { // //this是dom对象。用$转化成jquery对象。重点是执行谁的事件 this就是谁。监听事件的对象 // alert($(this).html()); // }) // $("#d1,#d2,#d3").click(function (e) { // //e.target是触发事件的对象,由于引起冒泡的这个事件是由#d3触发的。所以只会弹出#d3的html // alert($(e.target).html()); // }) //e.target和this只在事件冒泡中有这点区分。其他的都一样 //获取当前触发事件的对象 //1 js:window.event.srcElement 但这个在Firefox中不支持,jquery用e.target解决了兼容 //2,e.target 3,this $(":button").click(function () { // alert(this.value); // alert($(this).val()); // alert($(this).attr("value")); // alert(event.srcElement.value); }); $(":button").click(function (e) { alert(e.target.value); }); }) </script> </head> <body> <div id="d1" style="width: 300px; height: 300px; border: 1px solid"> <div id="d2" style="width: 200px; height: 200px; border: 1px solid"> <div id="d3" style="width: 100px; height: 100px; border: 1px solid"> </div> </div> </div> <input type="button" name="name" value="点击" /> </body> </html>
事件:鼠标事件click dbclick mousedown mouseup mouseover mouseout mouseenter mouseleaver hover 键盘事件 表单事件 事件处理关联事件 文档加载事件 浏览器事件 这里只说一下常用方法
e事件参数:一个层随鼠标位置移动
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> div { position: absolute; } </style> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"> </script> <script type="text/javascript"> // $(function () {//$(document).ready(function(){ ... }) // // alert($(document).text()); // // alert($(document).text()); // alert($('window').html()); // }) // $(function () {//可以不用当document ready加载完成时候 $(document).mousemove(function (e) { //相当这个页面,在没加载好的document上,鼠标移动e事件就出现 //document一开始(想想成html一开始出现就开始加载) $("div").css("top", e.pageY + "px").css("left", e.pageX + "px"); //pageX小写开始 // $("div").attr({"style":"top:"+e.pageY + "px"+";left:"+e.pageX + "px"})//也可以这种写法 // var v; // alert(v.s)//调试浏览器f12的console报错 // $("div").attr("top", e.pageY + "px").attr("left", e.pageX + "px");//错误,把top left 错当成元素的一个属性值 }) // }) </script> </head> <body> <form id="form1" runat="server"> <div> ddd </div> </form> </body> </html>
----
<!DOCTYPE html> <html> <head> <script src="jquery-1.12.3.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> .div1{ width:100px; height:100px; background:green; border:1px solid red; position:absolute;/*绝对定位*/ } </style> <script> $(function(){ var startPositionX=0,startPositionY=0; $(".div1").mousedown(function(ev){ //ev,$对象不需要做兼容 //$中pageX(在document)和js中cleintX(可视区域) //js中cleintX+scrollleft+scrollright的两边=$中pageX startPositionX=ev.pageX-$(this).offset().left;// startPositionY=ev.pageY-$(this).offset().top; //document注册,不管如何移动,不会脱离鼠标。.div1会冒泡到。一直在触发,里面的函数一直在走。 $(document).mousemove(function(ev){ $(".div1").css('left',ev.pageX-startPositionX).css('top',ev.pageY-startPositionY); }) $(document).mouseup(function(ev){ $(document).off(); }) return false;//最好阻止.div1的mousedown冒泡和默认。 }) }) </script> </head> <body> <div class="div1"></div> </body> </html>
还需要对移动的范围做控制,要不会出现滚动条。
移动到小图片,显示大图
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style type="text/css"> 5 /* .imgimport 6 { 7 width: 400px !important; 8 height: 400px !important; 9 }*/ 10 #tc 11 { 12 position: absolute; 13 width: 450px; 14 height: 450px; 15 border: 1px,solid,red; 16 } 17 </style> 18 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 19 <script type="text/javascript"> 20 $(function () { 21 // $("img").each(function () { 22 23 $("img").hover(function (e) {//事件用错,用成mousemove 24 //动态创建div 25 var divT = $("<div id='tc' ></div>"); //样式麻烦,动态生成的div也可以加样式表 26 $("body").append(divT);//将这个div一定先添加到body中。因为position:absolute的元素也是从body分离出的。 27 28 $bigpic = $("<img id='pp' src=" + $(this).attr('src') + "></img>"); 29 divT.append($bigpic);//先创造,后添加,一个等次一个等次的append。添加完 最后上样式。也可以添加完直接上样式 30 31 $bigpic.css("width", "400px").css("height", "400px"); 32 //设置大图位置 33 divT.css("top", e.pageY + "px").css("left", e.pageX + "px"); 34 35 36 }, function () {//鼠标离开,删除div 37 var tc = $("#tc") 38 // var p = $("#pp"); 39 tc.remove(); 40 // p.remove(); 41 // $bigpic.remove(); 42 43 }) 44 // }) 45 46 }) 47 48 </script> 49 <title></title> 50 </head> 51 <body> 52 <div> 53 <img src="pic/图片1.jpg" width="100px" height="100px" /> 54 <img src="pic/图片2.jpg" width="100px" height="100px" /> 55 </div> 56 </body> 57 </html>
效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <style type="text/css"> 6 #d1 7 { 8 background-color: red; 9 width: 200px; 10 height: 200px; 11 } 12 </style> 13 <!--<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 14 <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>--> 15 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 16 <script type="text/javascript"> 17 $(function () { 18 $(":button[value=show]").click(function () {//忘掉function() 19 // $("#d1").show(); 20 // $("#d1").show("slow"); //fast200 normal 400 slow 600ms 21 $("#d1").show(5000, function () { 22 23 var args = arguments; //overflow:hidden scroll visible防止div内的东西(文本)溢出div时做的事。下面有举例 24 25 alert("The paragraph is now hidden " + arguments); //f12浏览器有opacity0-1透明到完全不透明的渐变 26 }); //vsdoc库并没有opacity透明度的改变,min和正常库有渐变的效果 27 })// width: 156.06px; height: 156.63px; overflow: hidden; display: block; opacity: 0.777916 28 $(":button[value=hide]").click(function () { 29 // $("#d1").hide(); //设置style=“display:none” 30 $("#d1").hide(1000); 31 }) 32 $(":button[value=toggle]").click(function () { 33 34 $("#d1").toggle(5000); //点击执行show()和hide() 35 }) 36 $(":button[value=slideUp]").click(function () { 37 38 $("#d1").slideUp(5000); //向上边框隐藏 39 }) 40 $(":button[value=slideDown]").click(function () { 41 42 $("#d1").slideDown(5000); ////向下边框显示 43 }) 44 $(":button[value=slideToggle]").click(function () { 45 46 $("#d1").slideToggle(5000); 47 }) 48 $(":button[value=fadeOut]").click(function () { 49 50 // <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">//带中文提示在jquery库渐变效果不能显示。 51 $("#d1").fadeOut("slow"); //min 和正常库具有渐变效果 52 }) 53 $(":button[value=fadeIn]").click(function () { 54 55 $("#d1").fadeIn(1000); //渐变显示 56 }) 57 $(":button[value=stop]").click(function () { 58 59 $("#d1").stop(); //渐变显示 60 }) 61 }) 62 </script> 63 </head> 64 <body> 65 <!--显示隐藏 带有动画效果--> 66 <div id="d1"> 67 </div> 68 <input type="button" name="name" value="show" /> 69 <input type="button" name="name" value="hide" /> 70 <input type="button" name="name" value="toggle" /><br /> 71 <input type="button" name="name" value="slideUp" /> 72 <input type="button" name="name" value="slideDown" /> 73 <input type="button" name="name" value="slideToggle" /><br /> 74 <input type="button" name="name" value="fadeOut" /> 75 <input type="button" name="name" value="fadeIn" /> 76 <input type="button" name="name" value="stop" /> 77 </body> 78 </html>
<html> <head> <style type="text/css"> div { background-color:#00FFFF; width:150px; height:150px; overflow: scroll } </style> </head> <body> <p>如果元素中的内容超出了给定的宽度和高度属性,overflow 属性可以确定是否显示滚动条等行为。</p> <div> 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 </div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div { border: 1px solid red; width: 300px; height: 300px; background: red; } </style> <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script> <script type="text/javascript"> $(function () { $("div").click(function () { //div中的div没有style属性行内样式,不能更改 //$("div").animate({ "style": "width:100px;height:100px" }, "slow", function () { $("div").animate({ "width": "100px", "height": "100px" }, "slow", function () { alert("动画执行完成"); }) }) }) </script> </head> <body> <div> </div> </body> </html>
全反选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> //根据选项check判断全选是否被选中 function checkSingle() { var isCk = true; $(":checkbox[name='name']").each(function () { if (!$(this).attr("checked")) {//有一个选项没有选中 isCk = false; return false; //break.循环跳出 //return true 相当continue 跳出本次循环 继续下次循环 } }); $(":checkbox[value='c4']").attr("checked", isCk); } // $("input[type=checkbox][value=c4]").click(function () { //alert("1"); $(function () { //另外的思路,当选中的个数小于选项的个数,全选 false =true $(":checkbox[value='c4']").click(function () {//this点击的谁的结果集的DOM对象 $(":checkbox[name='name']").attr("checked", $(this).attr("checked")); //jquery中的checked 是true来表示checked="checked" }) //有一个选项没有选中,全选要取消 //选项 全部选中,全选要选中 //给选项checkedbox注册事件 //为全部选中,全选要选中。循环结束做准备 $(":checkbox[name='name']").click(checkSingle); //此写方法名,不带().只是注册,不是调用 //反选 $(":button[value='反选']").click(function () { $(":checkbox[name='name']").each(function () {//this each的谁的结果集的DOM对象 //对选项的状态取反 $(this).attr("checked", !$(this).attr("checked")); checkSingle(); }); }) }) </script> </head> <body> <input type="checkbox" name="name" value="c1" />玩耍 <input type="checkbox" name="name" value="c2" />睡觉 <input type="checkbox" name="name" value="c3" />读书 <input type="checkbox" name="ck"" value="c4" />全选 <input type="button" name="fx" value="反选" /> </body> </html>