|
1.jQuery引入:
<script src="jquery-1.10.2.min.js"></script>
2.jQuery入口函数及JavaScript入口函数:
??????? jQuery:??????? $(function(){ ... });
??????? JavaScript:??????? window.onload(){ ... };
3.jQuery选择器:
??????? 基本选择器:
| ID选择器 | $("#id") | 获取指定ID的元素 | | 类选择器 | $(".class") | 获取同一类class元素 | | 标签选择器 | $("div") | 获取同一类标签的元素 | | 并集选择器 | $("div,ul,li") | 使用逗号分隔, | | 交集选择器 | $("div.class") | 注:选择器1和选择器2之间没有空格 |
??????? 层次选择器:
| 子代选择器 | $("ul>li") | 使用>,获取直接子元素 | | 后代选择器 | $("ul li") | 使用空格,包括子孙等元素 |
??????? 过滤选择器:
| :eq(index) | $("li:eq(2)").css("color","red"); | 获取索引为2的元素,index从0开始 | | :odd | $("li:odd").css("color","green"); | 获取li中索引号为奇数的元素 | | :even | $("li:even").css("color","red"); | 获取li中索引号为偶数的元素 |
??????? 其他选择器:
| children(selector) | $("ul").children("li") | 相当于子代选择器 | | find(selector) | $("ul").find("li") | 相当于后代选择器 | | parent() | $("li").parent() | 找父元素 | | eq(index) | $("li").eq(2) | 相当过滤选择器eq | | next() | $("li").next() | 找下一个兄弟 | | prev() | $("li").prev() | 找上一个兄弟 |
4.事件:
??????? 语法:
// 如点击事件
$("#btn").click(function(){
// 触发后执行的代码
});
??????? 其他常见事件:
??????????????? 双击:??????? dblclick??????? 鼠标进入/离开:??????? mouseenter/mouseleave
??????????????? 获取焦点:??????? focus??????? 失去焦点:??????? blur
5.jQuery的css()方法:????????设置或返回被选元素的一个或多个样式属性
??????? 设置css属性:
// 设置单个css属性
$("p").css("background-color","red");
// 设置多个css属性
$("p").css("background-color":"red","color":"yellow");
??????? 返回css属性值:
$("p").css("background-color");
6.jQuery的css类:
// addClass():添加一个或多个类属性
$("#btn").click(function(){
$("h1,p").addClass("自定义类名");
});
// removeClass():删除一个或多个类属性
$("#btn").click(function(){
$("h1,h2,p").removeClass("blue");
});
// toggleClass():对被选元素进行添加/删除类属性的切换操作
$("#btn").click(function(){
$("h1,h2,p").toggleClass("blue");
});
7.jQuery动画:
??????? 常见动画效果:
??????????????? 隐藏显示:??????? hide(speed,callback) 和 show(speed,callback)
// speed参数规定隐藏/显示的速度,可以取以下值："slow"、"fast" 或毫秒; callback 参数是隐藏或显示完成后所执行的函数名称
// p标签隐藏
$("p").hide();
// p标签显示
$("p").show();
// toggle(speed,callback):切换隐藏和显示
$("p").toggle();
??????????????? 淡入淡出:??????? fadeOut(speed,callback) 和 fadeIn(speed,callback)
$("button").click(function(){
// fadeIn(speed,callback) 用于淡入已隐藏的元素
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
// fadeOut(speed,callback) 方法用于淡出可见元素
$("#div3").fadeOut(3000);
// fadeToggle(speed,callback):在 fadeIn() 与 fadeOut() 方法之间进行切换
$("#div1").fadeToggle();
// fadeTo(speed,opacity,callback):渐变为给定的不透明度(值介于0与1之间)
$("#div1").fadeTo("slow",0.15);
});
??????????????? 滑动:????????slideDown(speed,callback) 和 slideUp(speed,callback)
$("#flip").click(function(){
// slideDown(speed,callback):向下滑动元素
$("#panel").slideDown();
// slideUp(speed,callback):向上滑动元素
$("#panel").slideUp();
// slideToggle(speed,callback):在 slideDown() 与 slideUp() 方法之间进行切换
$("#panel").slideToggle();
});
??????????????? 自定义动画:????????animate({params},speed,callback)
/*
animate({params},speed,callback):
必需的 params 参数定义形成动画的 CSS 属性
可选的 speed 参数规定效果的时长
可选的 callback 参数是动画完成后所执行的函数名称
*/
$("button").click(function(){
$("div").animate({
'width':'300px',
'height':'300px'
},1000);
});
/*
stop(stopAll,goToEnd):适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false
默认地，stop() 会清除在被选元素上指定的当前动画
*/
$("#stop").click(function(){
$("#div").stop();
});
8.jQuery事件机制:
??????? 注册事件:??????? bind()、on():????????向被选元素添加事件处理程序
/*
bind(event,data,function,map):
event:必需。规定添加到元素的一个或多个事件,由空格分隔多个事件值
data:可选。规定传递到函数的额外数据
function:必需。规定当事件发生时运行的函数
map:规定事件映射
*/
$("p").bind("click",function(){
alert("这个段落被点击了");
});
// 被选元素及子元素上添加一个或多个事件
$("p").on("click",function(){
alert("段落被点击了");
});
??????? 委托事件:??????? delegate():????????向匹配元素的当前或未来的子元素添加处理程序
/*
delegate(childSelector,event,data,function):
childSelector: 必需。规定要添加事件处理程序的一个或多个子元素
event:必需。规定添加到元素的一个或多个事件,用空格分隔
data:可选
function:必需,事件发生时运行的函数
适用于当前或未来的元素:如脚本创建新的元素也会有该事件
*/
$("div").delegate("p","click",function(){
$("p").css("background-color","pink");
});
??????? 事件对象:???????
????????????????event对象常见属性:
| event.type | 返回哪种事件类型被触发,如click事件等 | | event.which | 返回指定事件上哪个键盘键或鼠标按钮被按下 | | event.target | 返回哪个 DOM 元素触发事件 | | event.data | 包含当前执行的处理程序被绑定时传递到事件方法的可选数据 | | event.pageX | 返回相对于文档左边缘的鼠标位置 | | event.pageY | 返回相对于文档上边缘的鼠标位置 |
9.jQuery HTML
??????? 捕获:???????
????????????????获取/设置内容:
| text() | 设置或返回所选元素的文本内容 | | html() | 设置或返回所选元素的内容(包括 HTML 标记) | | val() | 设置或返回表单字段的值 |
/*
html():
无参,获取内容(包括HTML标记)
有参,为设置内容
text() 和 val():同html,但是 text 和 val 无法设置标签
*/
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
/*
注:三者还都具有回调函数,函数内有两个参数:被选元素列表中当前元素的下标,以及原始值
*/
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
??????????????? 获取/设置属性:??????? attr() 和 prop()
// 获得链接中 href 属性的值
$("button").click(function(){
alert($("#runoob").attr("href"));
});
// 设置链接中 href 属性的值
$("button").click(function(){
$("#runoob").attr("href","http://www.baidu.com");
});
// 设置多个属性值,属性间用逗号隔开
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.baidu.com",
"title" : "jQuery"
});
});
??????????????? 注: 如具有true和false两个值的属性(checked,selected,disabled等)使用prop()设置,其余使用attr()
|