本帖最后由 武汉分校-小舞 于 2017-8-1 09:39 编辑
（本文档由就业部邹老师提供）
一、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、 例子： vardict={"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() {
$("#tb1tr").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","");
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); 设置按钮禁用
总结： 学习Jquery首先要知道它是js的一个框架，里面的所用都是做的封装js代码，其次就是要搞清楚它与原生的js(dom)的区别，只有JQuery对象才能调用它的方法，千万不要和dom对象搞混淆。最后就是Jquery中的选择器，过滤器，还有方法，其实简单理解的话就是选择器和过滤器最终就是要拿到页面上对应的标签文件对象，然后在根据拿到的对象需要去实现什么样的效果，去调用对应的方法。对于初学者而言，不需要把那些方法全部记住，只要知道有这个方法，然后会查api就行了。 | 
收藏
淘帖
踩
