jQuery笔记
jQuery是一个JS库，使用jQuery的话，比JavaScript更简单
因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。
1.1 jQuery基础
1.1.1 jQuery的写法
//第一种写法
$(dounment).ready(function(){
//dounment：文件
//ready:准备好
//function: 函数
});
//第二种写法
$(function(){
//function : 封装函数
});
1.1.2 DOM对象与 jQuery对象的区分
document.getElementByld("#myld").innerHTML;
//获取id为myld的节点
//这是DOM对象
$("#muyld").html();
//这是jQuery对象
jQuery对象不能用DOM对象的方法;
DOM对象不能用jQury里的方法;
1.1.3 DOM对象与jQuery对象的转换
jQuery对象转DOM对象
//jQuery提供了[index]与get(index)两种方法转换为DOM对象
一:
var $div = $("div");
var div = $div[0];
alert(div.innerHTML);
二：
var $div = $("div");
var div = $div.get(0);
alert(div.innerHTML);
DOM对象转jQuery对象
var div = document.getElementById("id");
var $div = $(div);
1.1.4 基本选择器
id选择器:
语法:$("#id")
class选择器:
语法:$(".class");
标签选择器:
语法:$("div");
获取多个元素:
语法:$("xx,xx,xx")
1.1.5 过滤
2.1 jQuery的DOM操作
2.1.1 创建节点
$("<h3 id="text"></h3>");
2.2.1 插入节点
warp(); -用指定结构的元素包裹元素
warpAll(); - 包裹多个元素
warpInner(); - 用指定结构包裹元素的内容
// 创建包含在某个 xx 李的节点
$("<h3 id='hello' class='xxx'>hello</h3>")
.unwrap("<h3>")
.wrap("<h5>")
.wrap("<header></header>");
2.3.1 附加节点
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
appendTo() - 将所有匹配的元素追加到指定的元素中
prependTo() - 将所有匹配的元素前置到指定的元素中
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$(".xx").append();
2.4.1 删除节点/内容
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
$("#div").remove();
2.5.1 操作DOM的方法
text() - 设置文本内容
html() - 设置或返回所选元素的内容（包含HTML标签）
val() - 设置或返回值，(如文本框中的值)
attr() - 获取属性值( 如$("#a").attr("href") 获取地址值 )
2.6.1 操作CSS
addClass() - 向被选元素添加一个或多个类
removeClass - 删除一个或多个类
toggleClass() - 对元素进行添加与删除的切换操作
//设置CSS属性
例:$("p").css("background","blue"); //背景颜色变为蓝色
//设置多个CSS属性
例:
$("P").CSS(
{
"background-color":"blue",
"font-size":"100%",
}
)
3.1 事件
API:
- 绑定:
$(el).on('click', function(event) { $(this).css("color", "red") }); - 简化:
$(el).click(callback); - 委托:
$(div).on('click', '.del', callback); - 取消:
$(div).off(); $(div).off('click');
事件类型:
- 鼠标: click / dblclick / mouseenter / mouseover / mouseout / mouseleave /hover
- 键盘: keydown/keyup/keypress
- 表单: focus/blur/change/select/sumbit
- DOM: ready/load/unload/resize/scroll
委托事件
$("section").on('click','.c2',function(ev){
alert("xxx");
})
悬停效果:
$(".c2").hover(
function (ev) {
console.log("222");
},
function(ev) {
console.log("leave");
}
);
4.1 动画
4.1.1 隐藏/显示
隐藏:hide();
显示:show();
如:
$("#hide").click(function(){
$("p").hide();
})
4.2.1 淡入/淡出
1.淡入：fadeln()
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);//毫秒
2.淡出：fadeOut()
3.切换:fadeToggle()
可在淡入，淡出之间切换
4.渐变:fadeTo()
允许渐变给为给定的不透明值(0-1之间)
无默认参数，必须加上slow/fast/time
例:
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
注意事项：大小写不能改变。
4.3.1 滑动
1.向下滑动 slideDown()
$(".xx").sildeDown(); //slow/fast/毫秒
2.向上滑动:slideUp()
3.切换:slideToggle()
可切换向上与向下滑动
4.4.1 停止
1.停止动画 stop()
$(".xx").stop();
4.5.1 自定义动画
1.animate(),自定义css属性,
例:
$(".butt").on('click',function(ev){
$(".div").animate({
left:'200px',
width:'220px',
height:'220px',
//可使用相对值,在当前数值的基础上加,
//写法为 width:'+=220px' -=
//也可使用show/hide/toggle等属性,width:'show'
opacity:'0.6',
fontSize:"50px"
})
})
注意：属性名必须使用Camel 标记法
必须使用 paddingLeft 而不是 padding-left
2.
5.1 异步请求(Ajax)
AJAX:异步JavaScript和XML，创建交互式网页应用的开发技术
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
