#jQuery
Query是一个JavaScript框架，封装JavaScript常用的功能代码，提供一种简便的
JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
##jQuery对象
#jQuery开发中所遇到的对象
- 通过$所获得的是jQuery对象
选择器: $("p")
强转: $(p)
创建对象: $("")
- 修改数据的方法返回jQuery对象
obj.html("abc")
obj.attr("src","")
- 若查询到的是元素则返回jQuery对象
obj.parent()
obj.next()
- 若读取到的是文本则返回DOM对象
obj.html()
obj.val()
- 万能的判断方式
控制台输出此对象,若是数组则是jQuery对象
#jQuery选择器(查询节点)
jQuery选择器类似于CSS选择，能够实现定位元素，施加行为使用选择器能够将内容与行为分离
##基本选择器
-
元素选择器：依据标签名定位元素
$(“标签名”) -
类选择器：根据class属性定位元素
$(".class属性名") -
id选择器：根据id属性定位元素
$("#id") -
选择器组：通过一组属性定位元素
$("#id, .class属性名") -
层次选择器
-
$(“select1 select2”)
在select1元素下，选中所有满足select2的子孙元素 -
$(“select1 > select2”)
在select1元素下，选中所有满足select2的子元素 -
$(“select1 + select2”)
选中 select1元素的，满足select2的下一个弟弟 -
$(“select1 ~ select2”)
选中 select1元素的，满足select2的所有弟弟
##过滤选择器 -
基本过滤选择器
-
-
根据元素的基本特征定位元素，常用于表格和列表
-
first，:last：$(“tr:first”)
:not(selector)：把满足selector的元素排除在外
:even：挑选偶数行
:odd：挑选奇数行
:eq(index)：下标等于index的元素
:gt(index)：下标大于index的元素
:lt(index)：下标小于index 的元素
-
first，:last：$(“tr:first”)
-
内容过滤选择器
-
根据文本内容定位元素
:contains(text)：选中包含给定文本的元素
:empty：选中所有不包含子元素或文本的空元素
$(“p:contains(‘月饼’)”) -
可见性过滤选择器
根据可见性定位元素
:hidden：选中所有不可见元素，或type为hidden的元素
:visible：选中所有可见元素
$(“input:hidden”) -
属性过滤选择器
根据属性定位元素
[attribute]：选中具有attribute属性的元素
[attribute=value]：选中属性等于value的元素
[attribute!=value]：选中属性不等于value的元素
$(“input[value=‘点击’]”) -
状态过滤选择器
根据状态定位元素
:enabled：选中可用的元素
:disabled：选中不可用的元素
:checked：选中被选中的checkbox
:selected：选中被选中的option
$(“input:selected”)##表单选择器
:text，:password，:radio，:checkbox
:submit，:reset，:button
:file，:hidden
示例：$(":text")
##读写节点
$(function(){
//html() == innerHTML
console.log($("p:eq(0)").html());
$("p:eq(0)").html("jQuery支持<u>读写</u>节点");
//text() == innerText
console.log($("p:eq(1)").text());
$("p:eq(1)").text("jQuery支持<u>增删</u>节点");
//val() == value
console.log($(":text:first").val());
$(":text:first").val("How are you");
//attr() == getAttribute(),setAttribute()
console.log($("img:first").attr("src"));
$("img:first").attr("src","../images/02.jpg");
});
##增删节点
//创建节点
var li = $("<li>天津</li>");
//插入DOM
parent.append(li);
$("ul").prepend(li);
$("#gz").after(li);
brother.before(obj);
//删除DOM
$("#gz").remove();
obj.remove(selector);
obj.empty();
##节点遍历
obj.children();//所有孩子
obj.next();//下一个兄弟
obj.prv();//上一个兄弟
obj.siblings();//所有兄弟
obj.findSelector();
obj.parent();
#jQuery样式操作
$(function(){
$("p").addClass("big").addClass("important");
$("p").removeClass("big").removeClass("important");
console.log($("p").hasClass("big"));
setInterval(function(){
$("p").toggleClass("big");
},200);
});
hasClass();
css("");//读取css值
/css("","")//设置多个样式
#jQuery事件
- 动态绑定
$(fn)和window.onload
onload写多次则后者会覆盖前者,而 ( f n ) 写 多 次 都 有 效 . o n l o a d 在 整 个 网 页 加 载 完 触 发 , 而 (fn)写多次都有效. onload在整个网页加载完触发,而 (fn)写多次都有效.onload在整个网页加载完触发,而(fn)是在标签加载完就触发.
bind
obj.bind(“click”,function(){})
obj.click(function(){}) - 获取事件源
e.target() - 取消冒泡
e.stopPropagation() - 合成事件
$(function(){
//给图片绑定悬停事件
$("img").hover(
function(){
$(this).addClass("big");
//toggleClass("big")
//width(250)
//css("width","250px")
//attr("class","big")
},//悬停时
function(){
$(this).removeClass("big");
} //离开时
);
//启动定时器
setInterval(function(){
//让图片在显示与隐藏间切换
$("img").toggle();
},500);
});
- 模拟操作
$(function(){
//给按钮x绑定单击事件
$("#gg>input").click(function(){
$("#gg").slideUp(500);
});
//推迟3秒
setTimeout(function(){
//对按钮x模拟单击事件,即
//让电脑自动点击一下按钮x
$("#gg>input").trigger("click");
},3000);
});
#jQuery动画
- show() hide()
- slideDown() slideUp()
- fadeIn() fadeOut()
上述函数都有两个参数(执行时间,回调函数) - 自定义动画
- animate(偏移位置,执行时间,回调函数)
<style>
#d1 {
width: 200px;
height: 200px;
background-color: red;
/*自定义动画基于定位(相对/绝对/固定)*/
position: relative;
}
#d2 {
width: 200px;
height: 400px;
background-color: blue;
position: fixed;
top: 100px;
right: -150px;
}
</style>
<script src="../js/jquery-1.11.1.js"></script>
<script>
function f1() {
$("#d1").show(3000);
}
function f2() {
//参数2是一个函数,jQuery会在动画完成后自动调用它.
//像这样的,需要传递给方法并且由方法自动调用的函数,
//通常称之为回调函数.
$("#d1").hide(3000,function(){
console.log("OVER");
});
//动画的实现原理:
//通过定时器不断修改元素的样式(大小及透明度).
//当前方法f2相当于主线程,调用的hide方法,
//相当于启动了定时器,即相当于启动了支线程.
//主线程和支线程并发执行,所以主线程立刻输出"完成",
//而动画却在3秒后才完成.
console.log("完成");
}
$(function(){
//给d1绑定悬停事件
$("#d1").hover(
function(){
$(this).animate({"left":"20px"},500);//自定义动画
},
function(){
$(this).animate({"left":"0"},500);
}
);
//给d2绑定悬停事件
$("#d2").hover(
function(){
$(this).animate({"right":0},500);
},
function(){
$(this).animate({"right":"-150px"},500);
}
);
});
</script>
- 显示、隐藏的动画效果
通过同时改变元素的宽度和高度来实现显示或隐藏元素 - 语法
$(selector).hide(speed, callack)
$(selector).show(speed, callback) - 参数
speed：可选。规定隐藏/显示的速度，取值为：“slow”, "fast"或毫秒
callback：可选。是隐藏/显示完成后所执行的函数名称
对象隐藏后会释放所占有的空间 - 上下滑动式动画效果
通过改变高度来实现显示或隐藏元素。图像元素与其他元素效果稍有不同 - $(selector).slideUp(speed, callback)
对象向上滑动，对象折叠，隐藏对象 - $(selector).slideDown(speed, callback)
对象向下滑动，对象展开，显示对象 - $(selector).slideToggle(speed, callback)
交替执行以上两个方法
参数同以上所释相同 - 淡入淡出式动画效果
通过改变不透明度opacity来实现显示或隐藏元素 - $(selector).fadeIn(speed, callback)
显示元素 - $(selector).fadeOut(speed, callback)
隐藏元素 - $(selector).fadeToggle(speed, callback)
交替执行以上两个方法 - $(selector).fadeTo(speed, opacity, callback)
参数callback同以上相同
speed此处是必需的
opacity必需。将淡入淡出效果设置为给定的不透明度（值介于0与1之间） - 自定义动画效果(animate)
语法 - $(selector).animate({params}, speed, callback);
参数
params定义形成动画的CSS属性采用直接量创建对象体现speed, callback同上 - 操作单个属性
示例：$("#div1").animate({left:‘250px’});
由于元素默认是静态的，如想要移动元素，需将其position属性设置为relative，fixed或absolute
不管写几个animate，都是相对于原始位置的偏移
#小知识点
账号:
扫一扫
482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
