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>
$(function(){}),onload执行区别
常用方法
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 );
children()只从孩子元素，find()孩子，孙子所有后代，first( )当前对象，不是孩子，孙子
//兄弟元素
$("#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");
兄弟前后一多元素$,父 子元素对应jquery方法
<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>
Jquery[css() val() text() html()] js[innerText innerHTML value] 及jquery和dom对象转化。div p和input的读写值
<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>
css() attr()区别 json数据 。add/remove/has/toggle/Class()
<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>
创建元素2种方式；附加元素2中方式； $(fun)=$(document).ready(fun)等同的推理（注意fun里面只写方法名，不带括号）
选择器
//$("p.intro") 选取所有 class="intro" 的 <p> 元素
//$("p#demo") 选取 id="demo" 的第一个 <p> 元素。
//相对定位,在$对象中查找 $()选择之后都编程jquery对象
//选择器的组合都在“”内完成。而相对定位$("选择器组合"，$对象)
<script type="text/javascript">
$(function () {
//相对定位,在$对象中查找 $()选择之后都编程jquery对象 //基本
//类，id 元素标签(节点名 p div input)
$(".i5").val("111");
$("#i1").css("background-color", "red");
$("input").attr("value", "11111111111111"); //注意不是表单选择器,：input虽然功能结果一样
$(":input").attr("value", "11111111111111"); //层次 后代（空格 >）和兄弟（+ ~） //子 子后代..."选择器 空格 选择器"
$("form p").css("background", "red"); //空格 所有符和第2个选择器的元素 后代 子 子后代...
$("#f p").css("background", "red"); //>直接后代> "选择器 ＞ 选择器" >两边有木有空格都行
//只在后代中找符合第二个选择器的元素,不能在子子后代..中找
$("#f>p").text("tttttt"); //p中不能包含p html //兄弟
//+之后的紧挨的第一个元素，如果紧挨的第一个元素 不符合选择器，就不会找到
$("#i1 + #i3").val("mmm"); //这样就会找不到 紧挨着的符合选择器
$("#i1 + #i2").val("mmm"); //这样行 //兄弟
//~之后的所有符合选择器的元素 从后面兄弟节点中找，后面兄弟节点子节点的元素即使符合，也选不中
$("#i1 ~ p").css("background", "red"); //，复合选择器 CSS中也有复合选择器
$("#i1,.i5,div").css("background", "blue") // $(":input:not(:first)").attr("value", "222");
})
</script>
</head>
<body>
<input type="text" name="name" value=" " />
<form action="/" method="post" id="f">
<input type="text" name="name" value=" " id="i1" />
<input type="text" name="name" value=" " id="i2" />
<input type="text" name="name" value=" " id="i3" />
<input type="button" name="name" value=" " id="i4" />
<input type="button" name="name" 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="name" value=" " />
</form>
</body>
Basic基本 Heirarchy 层次
// //属性过滤器，多属性【】【】 开始^= 结尾$= 不等!= 含有*=
// //代替后面的表单选择器
$("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"); //含有这个字母的都
Attribute属性过滤器
<!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>
Form：type ：disable checked一块 表单过滤器
<!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>
Basic Filter基本过滤器
<!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>
ContentFilter内从过滤器 has 标签 contains文本 以标签为福标签的节点 所有空标签
可视过滤器：hidden ：visible当成基本过滤器就好了
//后代过滤器不常用
append ..remove appendto 权限 bind() 注意一下。
$.each(json,function(){this表示json的一个键值对的值！！！ })
事件冒泡
从外到里
<!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 () {
// mouseout 和mouseover都会有事件冒泡从外到里的事件冒泡
var i = 0;
// $("#d1").mouseover(function () {
// i++;
// //$("#d1").text(i);// 大div 会把包含的小div去掉
// $("#d2").text(i);
// })
// $("#d1").mouseout(function () {
// i++;
// //$("#d1").text(i);// 大div 会把包含的小div去掉
// $("#d2").text(i);
// }) // mouseenter和mouseleave没有
$("#d1").mouseenter(function () {
i++;
//$("#d1").text(i);// 大div 会把包含的小div去掉
$("#d2").text(i);
})
$("#d1").mouseleave(function () {
i++;
//$("#d1").text(i);// 大div 会把包含的小div去掉
$("#d2").text(i);
})
})
</script>
</head>
<body>
<div id="d1" style="width: 300px; height: 300px; border: 1px solid">
<div id="d2" style="width: 100px; height: 100px; border: 1px solid">
</div>
</div>
</body>
</html>
Jquery中特别事件mouseover mouseout的外到里的事件冒泡
从里到外
<!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">
window.event
$(function () {
$("#d1").click(function () {
alert("11");
})
$("#d2").click(function () {
alert("22");
})
// $("#d3").click(function () {
// alert("33"); //当内元素和外元素具有同样的事件，点击内元素，外元素也会执行 这就是从里到外的事件冒泡
// }) //阻止外元素的事件执行
$("#d3").click(function (e) {
alert("33");
//window.event.cancelBubble = true;//第一种方法。用js中的方法
//return false;//第二种方法
e.stopPropagation(); //第三种方法
})
//e事件的对象==鼠标 键盘的相关信息 比如鼠标的position })
</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>
</body>
</html>
具有相同事件。里元素会触发外元素的同一事件。以及取消从里到外冒泡事件的3中方法
阻断默认行为
<!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>
阻断a标签 submit的默认行为2种方法e.preventDefault return false
获取当前对象
<!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>
window.event.srcElement和e.target和this的获取。以及this和e.target在冒泡中的细小区分
事件：鼠标事件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>
不用$(function(){}),直接写$(document).mousemove() 复习“”attr() css() json""的用法
----
<!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>
记录开始位置，更准确
还需要对移动的范围做控制，要不会出现滚动条。
移动到小图片，显示大图
<!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>
<style type="text/css">
/* .imgimport
{
width: 400px !important;
height: 400px !important;
}*/
#tc
{
position: absolute;
width: 450px;
height: 450px;
border: 1px,solid,red;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// $("img").each(function () { $("img").hover(function (e) {//事件用错，用成mousemove
//动态创建div
var divT = $("<div id='tc' ></div>"); //样式麻烦，动态生成的div也可以加样式表
$("body").append(divT);//将这个div一定先添加到body中。因为position：absolute的元素也是从body分离出的。 $bigpic = $("<img id='pp' src=" + $(this).attr('src') + "></img>");
divT.append($bigpic);//先创造，后添加，一个等次一个等次的append。添加完 最后上样式。也可以添加完直接上样式 $bigpic.css("width", "400px").css("height", "400px");
//设置大图位置
divT.css("top", e.pageY + "px").css("left", e.pageX + "px"); }, function () {//鼠标离开，删除div
var tc = $("#tc")
// var p = $("#pp");
tc.remove();
// p.remove();
// $bigpic.remove(); })
// }) }) </script>
<title></title>
</head>
<body>
<div>
<img src="pic/图片1.jpg" width="100px" height="100px" />
<img src="pic/图片2.jpg" width="100px" height="100px" />
</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">
#d1
{
background-color: red;
width: 200px;
height: 200px;
}
</style>
<!--<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>-->
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button[value=show]").click(function () {//忘掉function()
// $("#d1").show();
// $("#d1").show("slow"); //fast200 normal 400 slow 600ms
$("#d1").show(5000, function () { var args = arguments; //overflow:hidden scroll visible防止div内的东西（文本）溢出div时做的事。下面有举例 alert("The paragraph is now hidden " + arguments); //f12浏览器有opacity0-1透明到完全不透明的渐变
}); //vsdoc库并没有opacity透明度的改变，min和正常库有渐变的效果
})// width: 156.06px; height: 156.63px; overflow: hidden; display: block; opacity: 0.777916
$(":button[value=hide]").click(function () {
// $("#d1").hide(); //设置style=“display：none”
$("#d1").hide(1000);
})
$(":button[value=toggle]").click(function () { $("#d1").toggle(5000); //点击执行show()和hide()
})
$(":button[value=slideUp]").click(function () { $("#d1").slideUp(5000); //向上边框隐藏
})
$(":button[value=slideDown]").click(function () { $("#d1").slideDown(5000); ////向下边框显示
})
$(":button[value=slideToggle]").click(function () { $("#d1").slideToggle(5000);
})
$(":button[value=fadeOut]").click(function () { // <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">//带中文提示在jquery库渐变效果不能显示。
$("#d1").fadeOut("slow"); //min 和正常库具有渐变效果
})
$(":button[value=fadeIn]").click(function () { $("#d1").fadeIn(1000); //渐变显示
})
$(":button[value=stop]").click(function () { $("#d1").stop(); //渐变显示
})
})
</script>
</head>
<body>
<!--显示隐藏 带有动画效果-->
<div id="d1">
</div>
<input type="button" name="name" value="show" />
<input type="button" name="name" value="hide" />
<input type="button" name="name" value="toggle" /><br />
<input type="button" name="name" value="slideUp" />
<input type="button" name="name" value="slideDown" />
<input type="button" name="name" value="slideToggle" /><br />
<input type="button" name="name" value="fadeOut" />
<input type="button" name="name" value="fadeIn" />
<input type="button" name="name" value="stop" />
</body>
</html>
toggle(show hide ) slideToggle(slideUp slideDown) fadeIn渐显示fadeOut。 opacity 0-1 overflow：hidden scroll visible
<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>
overflow常用div的内容溢出
<!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>
animate(),常用。就加载做什么..鼠标.做什么。。自习想一想步骤都能写出
全反选
<!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>
全反选，根据选项checked true判断全选checked
jQuery：总体掌握的更多相关文章
- jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数
一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,con ...
- jQuery总体架构
第一章 总体架构 1.设计理念 jQuery的理念就是“写更少的代码,做更多的事”,而且做到代码的高度兼容性. 2.总体架构 大致可以分为三个部分:构造模块,底层支持模块和功能模块. 3.使用自调用 ...
- jQuery构造函数init参数分析（一）
在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用 ...
- jquery 源码学习（一）
从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结 1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQ ...
- 模仿下拉框datalist的jquery插件的一点小经验
原本项目里是用h5的新属性data-list,但是这个下拉框的数据太多,而data-list似乎没有设置高度的地方,所以写了个小插件,期间也发现了一些bug,目前这个版本算是可以一用的版本,故写一下这 ...
- jQuery笔记（一）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- jQuery-01
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- jQuery源码分析-01总体架构
1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, und ...
- jquery 1.7.2源码解析（一）总体架构
总体架构 jquery模块分类和依赖关系: 自调用匿名函数: /** * 自调用匿名函数,jquery加载完后立即被调用,用来加载各个模块 * 为什么使用自调用匿名函数: * 通过使用自调用匿名函数, ...
- jquery源码学习笔记一：总体结构
练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...
随机推荐
- JVM内存模型（二）
JVM为什么要区分为栈和堆? 栈代表的操作逻辑存储,堆代表的是数据逻辑存储,这样来划分更加清晰: JVM的内存在宏观上面来讲分为私有内存和共享内存:所谓共享内存(堆)寓意就是各个私有的栈(每个线程私有 ...
- CF 1013E Hills——隔项转移的DP
题目:http://codeforces.com/contest/1013/problem/E 设 dp[ i ][ j ][ 0/1 ] 表示前 i 个位置,有 j 个山峰,第 i 个位置不是/是山 ...
- 基于ionic框架封装一个图片轮播指令的几点
在这里我想在项目中封装一个图片轮播的指令 (本项目使用的是ionic框架) 1)定义指令 define(['app'],function(myapp){ myapp.directive('myslid ...
- Dynamics CRM 2011 快速查找 出现异常 QuickFindQueryRecordLimit exceeded. Cannot perform this operation 的解决方法
一.CRM 2011 快速查找,输入编号的签名几个字母发现查询很慢. 图 1 当然在图1 上右边的出入框输入编号的部分的时候,有时候会发现数据在加载中..,非常慢,通过Crm Trace Log Vi ...
- php生成随机颜色代码
function rand_color($color_array) { $color = dechex(rand(3355443,13421772)); if (in_array($color, $c ...
- 异步FIFO空满设计延迟问题
由于设计的时候读写指针用了至少两级寄存器同步,同步会消耗至少两个时钟周期,势必会使得判断空或满有所延迟,这会不会导致设计出错呢? 异步FIFO通过比较读写指针进行满空判断,但是读写指针属于不同的时钟域 ...
- spring Annotation based configuration
spring 注解相关 https://docs.spring.io/spring/docs/3.0.0.M3/reference/html/ch04s11.html
- HTML5: input:file上传类型控制
ylbtech-HTML5: input:file上传类型控制 1. 一.input:file 属性返回顶部 一.input:file属性 属性值有以下几个比较常用: accept:表示可以选择的 ...
- 用两条命令看出你买的H3C光模块是否是正品
display transceiver manuinfo interfacedisplay transceiver interface从下文可以看出 1/0/26 1/0/27 2/0/26三个端口的 ...
- Server Tomcat v8.0 Server at localhost failed to start.的解决方法
1.可能是web.xml中的filter-mapping中url-pattern没加/* 2.可能是servlet和servlet-mapping中的servlet-name不匹配