JQuery 学习笔记
一、Jquery简介
1、 JQuery 是对JavaScript 的封装 (JQuery 的扩展插件非常多)
2、 JQuery 中 $(#div) #代表一个元素 不加#代表多个
3、 JQuery 屏蔽了浏览器的差异
4、 开源、免费、可到网上下载大量的插件
5、 Vsdoc 是vs2008sp1以后添加的一个技术,将它和js 放到一起Vs就有自动提示的功能。
二、JQuery之ready
1、$(document).ready(function(){ alert(‘加载完毕’)}
2、ready 和 onload 的区别
onload 是所有元素创建完毕、图片、css等都加载完毕后才被触发的，而ready 则是Dom 元素创建完毕后就触发，这样可以提高网页的响应速度。
onload 只能注册一次,ready能注册多次
$(window).load()来实现onload那种事件的调用时机
3、简写ready 为 $(function(){alert('ready3'};})
4、$其实是一个名字很怪的函数
三、JQuery 提供的内置函数
1、$.map(array,fn) 对数组array中的每个元素调用fn函数逐个进行处理,将fn处理后的数组返回
例子: var arr=[3,5,8];
var arr2=$.map(arr,function(item){return item*2;});
2、$.map 不能处理Dictionary风格的数组
3、$.each(array,fn)
4、 例子： var dict={"tom":20,"liyang":26,"lili":25};
$.each(dict,function(key,value){alert(key+'的年龄是:'+value});
5、 var arr={3,5,8};
$.each(arr,function(item){alter(item)}); //item是索引012
$.each(arr,function(){alter(this);} //this 是值 3,5,8
6、VS中赋值出来的
$(function() { alert('页面加载完成,相当于onload事件'); });
var arr = [3, 5, 7];
var arr2 = $.map(arr, function(item) { return item*3});
alert(arr2);
var dict = { "tom": 20, "liyang": 25, "lili": 32 };
$.each(dict, function(key, value) { alert(key + "年龄是" + value); });
$.each(arr, function(key, value) { alert(key + "___" + value); });
四、JQuery对象、DOM对象
1、DOM对象要想通过JQuery操作必须转化为JQuery对象
2、document.getElementById("div1")=$('#div1')
3、DOM对象转化为JQuery对象 $(DOM对象名)
4、JQuery对象转化为DOM对象
var domobj=jqobj[0]或var domobj=jqobj.get(0)
例如： var div1=$(#div)[0];
$(function() {
var div1 = document.getElementById("div1");
$(div1).html("<a href='www.baidu.com'>百度</a>"); //dom对象div1 转换为JQuery对象
var div2 = $(div1)[0]; //JQuery对象转换为Dom 对象
alert(div2.innerHTML);
});
5、JQuery 设置样式 $("#div1").css("background","red");
获得样式 $("#div1").css("background");
设置value$("#txt1").val("测试");
获得value$("#txt1").val();
6、VS实例
$(function() { alert($("#div1").html()) });
$(function() { alert($("#div1").text()) });
五、JQuery选择器
1、$("#控件Id")=getElementById
2、$("TagName")=getElementByTagName 添加方法时隐式迭代
3、$(".test") =所有 class为"test" 的控件
4、多条件选择器
$("p,div,span.menuitem") 同时选择p标签,div标签,和拥有menuitem样式的span标签元素
5、注意 选择器表达式中的空格不能多也不能少
6、层次选择器
(1)、$("div li") 获取div下所有li元素(后代、子、子的子)
(2)、$("div > li") 获取div 下的直接li元素
(3)、$(".menuitem + div")
获取样式名称为menuitem之后的第一个div元素
(4)、$(".menuitem ~ div")
获取样式名称为menuitem之后的所有div元素
7、实例
//所有div(相当于getElementsTagName)添加点击事件 显示div中的Text
$(function() { $("div").click(function() { alert('我是' + this.innerText); }) });
//根据样式取得所有元素
$(function(){$(".waring").click(function(){ alert("我是警告信息");})});
//取到所有div下的li
$(function() { $("div li").click(function() { alert('可以获得所有div下的li'); }) });
//取得div下的直接子元素 li上层必须有ul
$(function() { $("div > li").click(function() { alert('只能取到div下直接的,p里面的取不到')}) });
六、JQuery的迭代
1、如何判断对象是否存在，JQuery返回的是一个对象数组，
调用text(),html(),click()之类的方法其实是对每个元素
迭代调用每个方法，因此通过id选择器选择的元素不存在也
不会报错，如果需要判断指定id是否存在，写成
if ($(#btn1").length<=0){alter('id为btn1的元素不存在');}
七、节点遍历
1、next() 获取同级的下一个元素(和本身类型相同)
2、nextAll()获取同级后的所有元素(类型可不同)
3、nextAll("div") 获取同级后所有的div元素
4、siblings() 用于获取所有同辈元素
5、siblings("div") 获取所有同辈div元素
九、基本过滤选择器
1、:first 选取第一个元素 $("div:first") 选择第一个<div>
2、:last 选取最后一个元素 $("div:last") 选择最后一个div
3、:not (选择器) 选取不满足"选择器"条件的元素
$("input:not(.myClass)") 选取样式不是myClass的<input>
4、:even、:odd 选取索引是奇数,偶数的元素:
$("input:event") 选取索引是奇数的input
$("input:odd") 选取索引时偶数的input
5、:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于
小于索引序号的元素，
$("input:lt(1)") 选取索引小于1的<input>
6、(":header") 选取所有的h1..h6的元素 *
7、("div:animated") 选取正在执行动画的<div>元素 *
8、相对定位: 只要在$()指定第二个参数,第二个参数为相对的元素
$("ul",$(this)).css("background","red")
8、实例： 奇数行黄色背景 第一行大字体 fontsize=40;
最后一行汇总 红色字体 前三行诗前三名 fontSize=28
$(function() {
// $("#tbMain tr:event").css("background", "yellow");
$("#tbMain tr:first").css("fontSize", "40");
$("#tbMain tr:last").css("color", "red");
$("#tbMain tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3) 是从gt(0)计算出新的序列开始的
$("#tbMain tr:gt(0):even").css("background", "yellow"); //表头不参与奇偶
//gt(0) 将导致序号发生变化
});
//向前行下的TD 用的相对定位
$(function() {
$("#tb1 tr").click(function() {
$("td", $(this)).css("background", "red");
});
});
十、属性过滤器
1、$("div[id]") 选取有id属性的<div>
2、$("div[title=test]") 选取title 属性为"test"的<div>
3、$("div[title!=test]") 选取属性不为"test"的<div>
还可以选择开头、结束、包含等，条件还可以复合(*)
表单过滤器
1、$("#form1:enabled") 选取id为form1的表单内所有启用的元素
2、$("#form1:disabled") 选取id为form1的表单内所有禁用的元素
3、$("input:checked") 选取所有选中的元素(Radio、CheckBox)
4、$("select:selected") 选取所有选中的的选项元素(下拉列表)
十一、元素的 each
$("input[name=names]").click(function() {
var arr = new Array();
$("input[name=names]:checked").each(function(key, value) {
arr[key] = $(value).val();
$("div").text("共选中" + arr.length + "项" + arr.join(","));
})
})
十二、表单选择器
1、$(":input") 选取所有<input> <textarea> <select> 和button元素
2、$(":text") 选取所有单行文本框 等价于 $("input:[type=text]")
3、$(":password")选取所有密码框
同理还有:radio :checkbox :submit :image :reset :button :file:hidden 等。
十三、JQuery的Dom操作
1、使用html()方法读取或设置innerHTML
2、使用text()方法读取或设置innerText
3、使用attr()方法读取或设置元素的属性,对于没有封装的属性用attr进行操作。
$("a:first").attr("href","http://www.baidu.com");
4、使用removeAttr删除属性
清空和删除的区别 清空是指href="" 删除时没有href属性
5、动态创建Dom节点 $(html字符串)
var link="<a href="baidu.com" >百度</a>";
6、append方法在元素末尾追加元素
7、prepend 在元素开始添加元素
8、after 在元素之后添加元素 (添加兄弟)
9、before 在元素之前添加元素(添加兄弟)
10、remove 删除选择的节点 (返回背删除的节点对象)，还可以继续使用被删除的节点
var lis=$("#ulSite").remove();
$("#ulSite2").append(lis);
11、empty()是将节点清空
12、用attr设置和取得jQuery没有封装的属性
$("#btnReg").attr("disabled", true); 设置按钮禁用
注意：动态写的东西搜索引擎抓不到
十八、节点操作
1、替换节点 将<br/>替换为<hr/>
$("br").replaceWith("<hr/>");
2、包裹节点 将粗体用红色包裹起来，再用用粗体
$("p").wrap("<font color='red'></font>");
$("p").wrap("<b></b>");
十九、样式操作
1、获取样式 attr("class")
2、设置样式 attr("class","myclass")
3、追加样式 addClass("myclass")
4、移除样式 removeClass("myclass");
5、切换样式 toggleClass("myclass");
6、判断样式 hasClass("myclass")
body * 代表body下的所有控件
实例 样式自己定义 .
$("#div1").addClass("day");
$("#div1").addClass("night");
$("#div1").removeClass("night");
$("#div1").toggleClass("night");
二十一、IECollection 可以按照IE好多版本
二十二、RadioButton 操作
1、获取RadioButton的值
$("input[name=gender]:checked").val();
2、设置RadioButton 的值（两种方式val中的[]不能少）
$("input[name=gender]").val(["男"]);
$(":radio[name=gender]").val(["男"]);
CheckBox操作
获取CheckBox的值
设置CheckBox 这里的val 是 checkbox value的值 不是最后面写的值
$(":checkbox").val(["篮球", "足球", "乒乓球1"]);
二十四、JQuery事件
1、事件绑定 bind
$("#btn").bind("click",function(){}) 简写为$("#btn").click(function(){})
2、合成事件 hover 变态的写法 hover(enterfn,leavefn)
3、事件冒泡 JQuery也有事件冒泡 从内到外
4、阻止冒泡 stopPropagation(); 给匿名函数传个参数 e 调用StopPropagation
5、阻止默认行为 preventDefault() 根window.event.returnValue=false 效果一样
6、 pageX,pageY, 屏幕点击时的x坐标和y坐标
target 获取触发事件的元素 相当于srcElement 最原始触发的控件
7、which 判读鼠标事件的按键(1、左键 2、中键 3、右键)
8、altKey、shiftKey、ctrlKey获得alt、shift、ctrl 是否按下 为bool值
9、keyCode、charCode属性发生事件时的keyCode charCode (主键盘1和小键盘1 keyCode不一样charCode一样)
10、移除事件绑定 unbind() 方法 即可移除元素上所有绑定的事件,如果unbind（"click") 则只是移除click事件
11、一次性事件 发生一次的事件 one
$(function() {
$("#tbMain").click(function() { alert('tbmain'); });
$("#tr1").click(function() { alert('tr'); });
$("#td1").click(function(e) { alert('td'); e.stopPropagation(); });
$("#p1").click(function() { alert('p1'); });
});
$("a").click(function(e) { alert('link 不连接了 '); e.preventDefault(); });
//一次性事件
$(":button").one("click", function() {
alert("我只能触发一次");
});
二十六、鼠标
1、获得鼠标的位置
$(function() {
$(document).mousemove(function(e) {
$("#fly").css("left", e.pageX).css("top", e.pageY);
});
});
<div id="fly" style="position:absolute">
<img src="../Image/xiyangyang.gif" />
</div>
二十八、动画
1、show()方法和hide()方法 toggle 切换 参数为显示隐藏的毫秒数
实例为QQ效果
$("#ulqq li:odd").addClass("body");
$("#ulqq li:even").addClass("header").click(function() {
$(this).next("li.body").show(400).siblings("li.body").hide(); ;
});
$("#ulqq li:first").click(); //模拟点击元素
三十、JQuery Cookie JQuery 插件
1、Cookie就是保存在客户端浏览器上的内容
2、Cookie需要浏览器的支持
3、Cookie与域名相关
4、Cookie会被浏览器自动清除，用户可能手动清除
5、Cookie存不重要的数据
三十一、JQuery Cookie的使用 (Cookie保存的是键值对 参数用的时候在查)
1、添加对jquery.cookie.js的引用
2、设置值$.cookie('名字','值'); cookie保存的是文本
3、读取值$.cookie('名字');
4、在同域名的另一个页面中也可以读出来
5、expires:7 表示浏览器保存几天
6、domain: 设置二级域名互相读
7、path 设置网站的哪些页面可以读
//读取
alert($.cookie("用户名"));
//设置
$.cookie("用户名", "tom");
三十五、JQueryUI 这个非常好 用的时候直接调用
1、JQuery插件特别全 可以设置好多的东西
2、http://jqueryui.com/ 去这里下载有Demo
三十六、web开发辅助工具介绍
1、微软IE8自带的工具 开发人员工具 Internet Explorer Developer ToolBar
原创地址：http://blog.csdn.net/liumm0000/article/details/7820433
Jquery学习笔记（一）
1.HTML负责页面内容，CSS负责页面样式，JS负责页面行为。
2.HTML中应该有DOCTYPE来告知浏览器的渲染方式
3.可以预先定义DIV或者是SPAN节点来显示服务器端返回的数据
4.border属性可以控制页面元素的边框
5.background-***可以控制背景图，背景图位置，重复显示的方式
6.可以通过#idname和.classname来设定html节点的样式
7.可以通过$(document).ready(function(){})方式来定义页面装载完成以后需要执行的方法
8.可以通过$()来获取页面上指定的节点，参数是某种css的选择器
9.可以在$()返回的Jquery对象上执行各种Jquery方法来获取数据，定义事件，执行事件
10. .val()方法可以获得节点的属性值
11. .html()可以获得某个节点的html内容
12. click()方法可以响应鼠标点击事件
13. .keyup()方法可以响应键盘键弹起事件
14.$.get()方法可以与服务器端进行get方式进行交互，注册的callback方法会在数据返回来的调用。这个方法会接收到代表服务器端返回数据的一个纯文本参数
15.addClass()和removeClass()可以为某一个节点增加或者删除样式
16.发送给服务器端的数据在js中可以进行两次encodeURI，然后再服务器端进行URLdecide方式UTF-8方式进行解码，可以解决中文乱码问题
Jquery学习笔记（二）
1.table中可以包含thead和tbody
2.表头的内容可以放到th中
3.table{}被称为标签选择器，可以对整个页面的table产生影响
4.table td {}这种写法是表示的是table中所有的td
5.可以通过border-collapse:collapse这种方式来使表格中的单元格进行合并
6.当th上有背景色的时候，这个th所属的tr的背景色会自动无效
7.$(function(){})是$(document).ready(function(){})的简化写法
8.$("tbody tr")可以返回tbody的所有tr节点
9.$("tbody tr :even")可以返回所有的tbody中索引值为偶数的tr节点
10.css方法可以用于设定获取节点的css属性，参数名是css的属性名
11.Jquery的对象内容包含着选择器对应的DOM节点，以数组的形式保存
12.get方法可以获取Jquery对象包含的某一个DOM节点
13.function中的this代表执行这个function的对象
14.$()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成Jquery对象
15.children方法是可以获得某个节点的子节点，可以通过参数来限制子节点的参数
16.如果选择器中包含有多个DOM节点在这个对象上注册类似click这样的事件时所有DOM节点都会用于事件
17.html方法可以用于设定或者获取节点的html内容
18.val可以设置或者获取节点的value值
19.$()的参数如果是一段正确的html代码的话，则可以创建一个DOM节点并包装成Jquery对象。
20.Jquery的大部分方法都会返回执行这个方法的Jquery对象，因此可以采用链式写法来编写Jquery代码
21.width可以用于设定和获取节点的宽度
22.appendTo可以用于将一个节点追加到另一个节点上
23.阻止事件传递可以可以让当前节点的事件返回false
24.triger方法可以出发某个js事件的发生
25.可以在function(event){}中添加event参数，Jquery会屏蔽浏览器的差异返回给我们一个可用的event对象
26.event有一个which属性可以获取键盘键值
27.13表示回车键，27表示ESC键。
Jquery学习笔记（三）
1.页面中的菜单可以通过嵌套ul和li标签来实现
2.ul和li标签默认的时候文字前面都有圆点标识符，li会有缩进，Opera浏览器比较特殊。
3.list-style属性值为none的时候可以清除ul和li的前面小圆点
4.清除子菜单的缩进需要将padding和margin都设置成0，其中IE6和IE7只有margin也为零的时候才可以清除缩进值
5.可以使用background-image来指定一个元素的背景图，如果背景图比实际的元素要是小的话会自动在横向或者纵向上重复显示，直到填满整个区域为止
6.可以使用background-repeat来控制背景图的填充方式
7.如果一个元素同时定义了背景图和背景色的话，有背景图的地方是不会显示背景色的。
8.text-decoration属性值为none时，可以取消文字上的下划线
9.background-position可以控制背景图的位置，属性值既可以用数值也可以用center和top和left来控制横纵向的位置，这个属性的两个值一个对应横向，一个对应纵向
10.background-image的值为none的时候表示没有背景图
11.background-repeat的值为no-repeat的时候背景图不会在所在的区域中重复显示
12.IE6以外的浏览器可以通过设定display的值为block来让a元素充满所在的区域。对于IE6，则需要设定display为inline-block，同时设定a的宽度。
13.display的值为none可以用来隐藏元素
14..main a 和.main >a 的不同之处，前者选择使用了.main的这个class的元素内部所有的a节点，后者只选择.main的子节点中的a节点
15.show ，hide 方法可以用于显示或者隐藏元素，没有参数时的效果和修改css的display属性效果一样。参数可以是单位为毫秒的数字，或者是‘slow’‘normal’‘fast’这三个文字都可以来控制完成显示或者隐藏需要的时间。注意这时的动画效果靠不断的改变元素的宽度和高度来实现的。
16.toggle方法更为强大，可以省去让我们判断元素是显示还是隐藏的状态，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数的使用方法和show，hide相同
17.slideDown，slideUp可以实现向下或者向上的卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数为空的情况和show，hide不同
18.slideToggle和toggle达到的效果类似
19.DOCTYPE对于Jquery中的动画是有影响的。没有DOCTYPE定义时，在IE中，JQuery的动画会出现闪烁的糟糕效果
20.float的值是left，可以使原本各自位于一行的元素全部在一行中向左浮动
21.可以给多个选择器定义同样的样式，选择器之间用，分割。同样对已JQuery的$方法，也可以传入这个过滤器。
转自：http://blog.csdn.net/lqc851011/article/details/5287294
/******************************
* jQuery学习笔记
* @author Linvo
******************************/
/*=========
2009-1-14
=========*/
$() = $(document)
//实现window.onload()效果
$().ready(
function(){
//需要执行的内容
}
);
//获取DOM元素(返回值为jQuery对象)
$("element") //相应元素名的
$(".classname") //class值匹配的
$("element.classname") //相应元素中，class值匹配的
$("#id") //id匹配的
$("element#id") //相应元素中，id匹配的
$("element1 > element2") //元素一 下 的所有元素二（只包括儿子）
$("element1 element2") //元素一 中 的所有元素二（包括子孙等）
$("element1 + element2") //元素一 后 的所有元素二（代码后）
$("element1 ~ element2") //与元素一 并列 的所有元素二（兄弟元素二）
$("#id").html("") //设置 getElementById("id").innerHTML = ""
$("#id").html() //取出 getElementById("id").innerHTML
//动画出现效果
$("#id").show(speed, [callback])
$("#id").slideDown(speed, [callback])
……
/*=========
2009-1-16
=========*/
//在<p>外面包围另一个结构（html代码/元素）
$("p").wrap("<div class='wrap'></div>")
$("p").wrap(document.getElementById('content'))
$("p").append("<b>Hello</b>"); //<p>I would like to say: <b>Hello</b></p>
$("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>
$("p").before("<b>Hello</b>"); //<b>Hello</b><p>I would like to say: </p>
$("p").after("<b>Hello</b>"); //<p>I would like to say: </p><b>Hello</b>
//【删除相应class的p元素】
//<p class="classname">AAA</p> BBB <p>CCC</p>
//BBB <p>CCC</p>
$("p").remove(".classname");
/*=========
2009-1-18
=========*/
//获取具有某属性值的相应元素
$("input[name=qq]") //获取<input name="qq" type="text" />元素
//属性与值关系
= //等于
*= //包含该值
!= //不包含该值
^= //以该值开头
$= //以该值结尾
//为每一个匹配的元素执行该函数
$("element").each(function(){
//需要执行的内容
})
/*=========
2009-1-19
=========*/
/*
jQuery中用post和get方法
（ajax高层抽象方法，对ajax方法进行了封装）
【当JQ中用post方式】
PHP用$_POST接收时，只有n2
PHP用$_GET接收时，只有n1
【当JQ中用get方式】
PHP用$_GET接收，n1 n2都有
PHP用$_POST接收时，都没有
*/
$.post("do.php?n1=a", {n2: "b"},
function(data){
alert("Data Loaded: " + data);
}
);
/*=========
2009-1-20
=========*/
//DOM对象 -> jQuery对象
//$(DOM对象)
var v = document.getElementById("id"); //DOM对象 v
var $v = $(v); //jQuery对象 $v
//jQuery对象 -> DOM对象
//jQuery对象.get(0) 或者 jQuery对象[0]
var $v = $("#id"); //jQuery对象 $v
var v = $v.get(0); //DOM对象 v
var v = $v[0]; //DOM对象 v
$("element").get(); //获取指定元素的集合
//jQuery用ajax方法（ajax低层方法）
$.ajax({
type: "POST", //POST时PHP中用$_POST接收，GET反之。
url: "do.php",
data: "n1="+x+"&n2="+y,
success: function(data){ alert( "Data Saved: " + data ); }
});
/*=========
2009-1-21
=========*/
//序列表表格内容为请求字符串
//返回值：（例）name=linvo&age=22
$("form").serialize() //序列化整个表单元素内容
$("input[type=text]").serialize() //序列化指定元素内容（例）
$("element").empty(); //移除指定元素下所有元素
/*
CSS设置
*/
$("element").addClass("classname"); //为指定元素添加css样式
$("element").removeClass("classname") //移除指定元素的css样式
$("element").toggleClass("classname") //指定元素的css样式，有则删除，无则添加
$("element").css("attname"); //获取指定元素相应属性的值（attname例：color）
$("element").css("attname","value"); //设置……属性值（例："color","#FF0000"）
$("element").css({ "margin-left": "10px", "background-color": "blue" });
//使用“名/值对”进行批量设置……（例子见自身）
/*=========
2009-1-22
=========*/
$("element1").next(element2) //与指定元素一 紧邻 的指定元素二
$("element1").parent().is(element2) //元素一的父元素在元素二的集合中吗
//模仿鼠标悬停事件
//hover(over,out)
//over:在上方执行 | out：移出时执行
$("element").hover(
function(){
//在上方执行
}, function(){
//移出时执行
}
) 
扫一扫
90
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
