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
扫一扫
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
