jquery
更新日期:
jQuery上
内容概要
jQuery环境的配置
$(document).ready与window.onload的区别
jQuery选择器
基本选择器、层次选择器、基本过滤选择器、内容过滤选择器、属性过滤选择器、
子元素过滤选择器、表单属性选择器
jQuery的常见方法
jQuery的优势
轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源
配置jQuery环境
获取jQuery最新版本
进入jQuery官网，下载最新jQuery库文件。
1.x代表的是兼容ie6-8
2.x代表的是不兼容ie6-8
在页面中引入jQuery
在head标签内引入jQuery，格式如下：
<script type="text/javascript" src=“../script/jquery.js”></script>
代码及注意事项
$(document).ready(function(){
alert(“Hello World!”);
});
注意：
1.在jQuery库中，$ 就是jQuery的一个简写形式
例如： $(“#div”)==jQuery(“#div”)
2.当浏览器解析完document后，执行ready小括号内的函数。
ready与onload的简单区别
- 执行时机
编写个数
下面分别有两组代码，思考一下运行结果会有什么不同
window.onload=function(){ alert(1); } window.onload=function(){ alert(2); } $(document).ready(function(){ alert(1); }); $(document).ready(function(){ alert(2); });
简写
$(document).ready( function () { …} )
可以简写为：$(function () {…} )
jquery使用入门
选择器:类似于css的选择器(包含css1-css3的选择器)
例子：
$(“#div1>p”)
事件绑定：
$(“#btn”).click(function (){});
$(“#btn”).on(“click”,function (){});
修改样式：
$(“#div1”).css({“left”:100});
修改属性：
$(“#img1”).attr({“src”: “img/1.jpg”});
动画：
$(“#div1”).animate({“left”:100},500,function (){alert(‘a’);});
dom操作
创建元素：
$("<div><a href=‘###'>xx</a></div>")
添加元素：
$("<div><a href='###'>xx</a></div>").appendTo('#div1');
原生对象转jquery对象
var div1 = document.getElementById(“div1”);
$(div1).css();
jquery对象转原生对象
$(“#div1”).get(0).offsetWidth;
jquery使用-实例
jquery版大图滚动、tab切换
全选案例
jQuery选择器的优势
简洁的写法
支持CSS1到CSS3选择器
完善的处理机制
jQuery选择器的分类
- 基本选择器
- 层次选择器
- 过滤选择器
基本选择器
选择器 描述 返回值 实例
#id 根据给定的id匹配一个元素 单个元素 $(“#demo”)选取id为demo的元素
.class 根据给定的类名匹配元素 集合元素 $(“.demo”)选取class为demo的元素
element 根据给定的元素名匹配元素 集合元素 $(“p”)选取所有的<p>元素
* 匹配所有元素 集合元素 $(“*”)选取所有的元素
Selector1,selector2,…，selectorN 将每一个选择器匹配到的元素合并后一起返回 集合元素 $(“div,span,p.myClass”)选取所有<div>，<span>和拥有class为myClass的<p>标签的一级组元素
层次选择器
选择器 描述 返回值 实例
$(“ancestor desendant”) 选取ancestor元素里的所有desendant(后代)元素 集合元素 $(“div span”)选取<div>里的所有的<span>元素
$(“parent>child”) 选取parent元素下的子元素 集合元素 $(“div>span”)选取<div>元素下元素名是<span>的子元素
$(“prev+next”) 选取紧接在prev元素后的next元素 集合元素 $(“.one+div”)选取class为one的下一个<div>同辈元素
$(“prev~siblings”) 匹配所有元素选取prev元素之后的所有siblings元素 集合元素 $(“#two~div”)选取id为two的元素后面的所有<div>同辈元素
基本过滤选择器
选择器 描述 返回值 实例
:first 选取第一个元素 单个元素 $(“#demo”)选取id为demo的元素$(“div :first”)选取所有<div>元素中第1个<div>元素
:last 选取最后一个元素 单个元素 $(“div:last”)选取所有<div>元素中最后一个<div>元素
:not(selector) 去除所有与给定选择器匹配的元素 集合元素
$(“input:not(.myClass)”)选取class不是myClass的<input>元素
:even 匹配所有元素选取索引是偶数的所有元素，索引从0开始 集合元素 $(“input:even”)选取索引是偶数的<input>元素
:odd 选取索引是奇数的所有元素，索引从0开始 集合元素 $(“input:odd”)选取索引是奇数的<input>元素
:eq(index) 选取索引等于index的元素(index从0开始) 单个元素 $(“input:eq(1)”)选取索引等于1的<input>元素
:gt(index) 选取索引大于index的元素(index从0开始) 集合元素
:lt(index) 选取索引小于index的元素(index从0开始) 集合元素 $(“input:even”)选取索引是偶数的<input>元素
内容过滤选择器
选择器 描述 返回值 实例
:contains(text) 选取含有文本内容为“text”的元素 集合元素 $(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素
:empty 选取不包含子元素或者文本的空元素 集合元素 $(‘div:empty’)选取不包含子元素和文本的<div>空元素
:has(selector) 选取含有选择器所匹配的元素的元素 集合元素 $(‘div:has(p)’)选取含有<p>元素的<div>元素
:parent 选取含有子元素或者文本的元素 集合元素 $(“div:parent”)选取拥有子元素或文本元素的<div>元素
属性过滤选择器
选择器 描述 返回值 实例
[attr] 选取拥有此属性的元素 集合元素 $(“div[id]”)选取拥有属性id的元素
[attr=value] 选取属性的值为value的元素 集合元素 $(“div[title=test]”)选取属性title为”test”的<div>元素
[attr!=value] 选取属性的值不等于value的元素 集合元素 $(“div[title!=test]”)选取属性title不等于 ”test”的<div>元素
[attr^=value] 选取属性的值以value开始的元素 集合元素 $(“div[title^=test]”)选取属性title以”test”开始的<div>元素
[attr$=value] 选取属性的值以value结束的元素 集合元素 $(“div[title$=test]”)选取属性title以”test”结束的<div>元素
[attr*=value] 选取属性的值含有value的元素 集合元素 $(“div[title*=test]”)选取属性title含有”test”的<div>元素
[attr1][attr2][attrN] 选择满足所有属性选择器的元素 集合元素 $(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素
子元素过滤选择器
选择器 描述 返回值 实例
:nth-child(index/even/odd) 选取每个父元素下的第index个或者奇偶元素。index从1开始 集合元素 $(‘div:nth-child(1)’) 选取所有div中的，是其父标签的第一个子标签的div；
$(‘div:eq(0)’);选取第一个div；
:first-child 选取每个父元素的第一个子元素 集合元素 $(“ul li: first-child”)选取每个<ul>中第一个<li>元素
$(‘div:first’)选择所有div标签中的第一个。
:last-child 选取每个父元素的最后一个子元素 集合元素 $(“ul li: last-child”)选取每个<ul>中最后一个<li>元素；$(‘div:last’)选择所有div标签中的最后一个。
:only-child 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。 集合元素 $(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素
子元素选择器重难点
- first-child与：first的区别
- nth-child(index)与：eq(index)的区别
nth-child(表达式)的应用
1 2 3 4 5 6 7 8 9 nth-child(2n) nth-child(2n+1) nth-child(3n+1)
jQuery常用方法
jQuery链式操作
//传统写法
var div = document.getElementById('test');
div.style.color = 'red';
div.style.width = '20px';
//JQ链式写法
$('#test').css('color','red').css('width','20px');
课程总结
jQuery库在网页中的引入
$(document).ready()的用法
jQuery包含的选择器种类及其各自的区别
jQuery下
jQuery库在网页中的引入方法?
$(document).ready()与onload的区别?
JQ与原生javascript相比，有何优势?
说出jQuery包含的选择器种类，并举例?
能够说出jq中对于dom节点有哪些操作方法?
能够将javascript和jq的命令相比较?
能够熟练运用jq的语法?
创建元素节点
运用传统的javascript方法，创建一个div节点：
var node = document.createElement(‘div’);
jQuery中创建一个div节点：
$(‘<div></div>’);
创建文本节点
运用传统的javascript方法，创建一个文本节点：
var textNode = document.createTextNode(‘My Demo’);
jQuery中创建一个div节点：
$(‘<div></div>’);
jQuery中创建一个有文本的div节点：
$(‘<div>My Demo</div>’);
设置属性
运用传统的javascript方法，设置/获取属性：
setAttribute();//设置
var a = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);
不管以前有没有title属性，以后的值是 my demo。
getAttribute();//获取
var a =document.getElementById(“CSSrain”);
var b = a.getAttribute(“title”);
获取的时候，如果属性不存在，则返回空，
jQuery中设置/获取属性：
$(“#test1″).attr({ “class” : “test” , “title” : “TestDemo!” });
$(“#test1″).attr(“class”);
css对象模型
css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
outerWidth() 获取元素的包含padding,border宽度,可选参数为true的话包含margin.
offset() 返回第一个匹配元素相对于文档的位置。
offsetParent() 返回最近的定为祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。
插入节点
运用传统的javascript方法，插入一个节点（如使用appendChild()）：
var container = document.createElement(“p”);
document.body.appendChild(container);
jQuery中插入节点：
$(‘body').append('<div>在body的末尾加入一个新的div</div>');
append after
appendTo insertAfter
prepend before
prependTo insertBefore
删除节点
运用传统的javascript方法，删除一个节点：
var b = document.getElementById(“test”);
var c = b.parentNode;
c.removeChild(b);
jQuery中删除节点：
$(‘#test′).remove();
remove
empty
替换节点
运用传统的javascript方法，替换节点：
Element.repalceChild( newNode , oldNode );
oldNode必须是Element的一个子节点。
jQuery中替换节点：
$(“<p>替换 test1！</p>”).replaceAll(“#test1″);
复制节点
运用传统的javascript方法，复制一个节点：
var mes = document.createTextNode("hello world");
var container = document.createElement("p");
container.appendChild(mes);
document.body.appendChild(container);
var newpara = container.cloneNode(true);//true和false的区别
document.body.appendChild(newpara );
Element.repalceChild( newNode , oldNode );
oldNode必须是Element的一个子节点。
jQuery中复制一个节点：
var a = $('<p>hello world</p>');
$('body').append(a);
var clone_a = a.clone();
$('body').append(clone_a);
html();
遍历节点
.children() 获得匹配元素集合中每个元素的所有子元素
找到类名为 "selected" 的所有 div 的子元素
.next()获得匹配元素集合中每个元素紧邻的同辈元素
查找每个段落的下一个同胞元素，仅选中类名为 "selected" 的段落
.siblings()获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）
查找每个 p 元素的所有类名为 "selected" 的所有同胞元素
.parent()获得当前匹配元素集合中每个元素的父元素，由选择器筛选
（可选）
查找每个段落的带有 "selected" 类的父元素
.prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）
检索每个段落，找到类名为 "selected" 的前一个同胞元素
.find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
搜索所有段落中的后代 span 元素，并将其颜色设置为红色
.eq()
属性操作
addClass() 向匹配的元素添加指定的类名。
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的HTML内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值。
事件绑定
bind(type,function)：绑定事件
mousemove(function)：绑定鼠标移动事件
mouseover(function):绑定鼠标进入事件
focus、blur
…….
总结
针对节点的操作有哪些？
遍历节点的方法举例?
JQ中的事件绑定方法与原生javascript的事件绑定方法有何不同？
说出简单的属性操作有哪些?
留点小作业
总结JQ中的基本语法，与原生javascript语法做对比。尝试使用JQ实现原生的一些简单功能（如：事件绑定等），并制作之前完成的一些效果，如Tab切换、新浪微博。
