jquery###选择器###事件###动画
###jQuery
- 什么是jQuery:是一个js框架,可以让程序员写的更少但实现的更多,此框架本身就是由js语言缩写
- jQuery优势:
- 简化js代码
- 可以像css一样获取元素 #abc $("#abc")
- 可以批量修改元素的样式
var arr = document.getElementsByTagName(“div”);
for(var i=0;i<arr.length;i++){
arr[i].style.color = “red”;
}
$(“div”).css(“color”,“red”); - 解决部分兼容性问题
####如何引入jQuery框架
-
因为jq就是通过js代码所写,所以引入此框架和引入普通的js文件方式一样
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
####jq事件的动态绑定
$("#btn").click(function(){
alert("点击了!");
});
####js对象和jq对象相互转换
- js转jq
var jq = $(js); - jq转js
var js = jq[0];
###jQuery的选择器 - 基础选择器
- 标签名选择器 $(“div”)
- id选择器 $("#id")
- 类选择器 $(".class")
- 分组选择器 $(“div,#id,.class”)
- 任意元素选择器 $("*")
###层级选择器 - $(“div span”) 匹配div里面的子孙span
- $(“div>span”) 匹配div里面所有子元素span
- $(“div+span”) 匹配div后面紧邻的span 弟弟span
- $(“div~span”) 匹配div后面所有的span 弟弟们span
- 层级函数:
- 获取元素的所有兄弟元素
$("#abc").siblings() 得到id为abc的所有兄弟元素 sibling兄弟姐妹
$("#abc").siblings(“div”) 得到id为abc的所有div兄弟元素 - 获取元素的哥哥元素
$("#abc").prev() 得到id为abc的任意哥哥元素 == prev上一个,先前的==
$("#abc").prev(“div”) 得到id为abc的div哥哥元素 - 获取元素的哥哥们元素
$("#abc").prevAll() 得到id为abc的哥哥们元素
$("#abc").prevAll(“div”) 得到id为abc的div哥哥们元素 - 获取元素的弟弟元素
$("#abc").next() 得到id为abc的弟弟元素 - 获取元素的弟弟们元素
$("#abc").nextAll() 得到id为abc的弟弟们元素
###过滤选择器
- 获取元素的所有兄弟元素
- $(“div:first”) 匹配所有div中的第一个元素 first第一,首先
- $(“div:last”) 匹配所有div中的最后一个元素
- $(“div:even”) 匹配所有div中下标为偶数的 从0开始
- $(“div:odd”) 匹配所有div中下标为奇数的 从0开始
- $(“div:eq(n)”) 匹配所有div中下标为n的元素 从0开始
- $(“div:lt(n)”) 匹配所有div中下标小于n的元素
- $(“div:gt(n)”)匹配所有div中下标大于n的元素
- $(“div:not(.one)”) 匹配所有div中 class值不为one的
###内容选择器 - $(“div:has§”) 匹配所有包含p子元素的div元素
- $(“div:empty”) 匹配所有空的div == empty空的==
- $(“div:parent”) 匹配非空div == parent父母,根源==
- $(“div:contains(‘xxx’)”) 匹配所有包含xxx文本的div contain包含,容纳
###可见选择器 - $(“div:hidden”) 匹配所有隐藏的div元素 == hidden隐藏的,秘密的==
- $(“div:visible”) 匹配所有显示的div元素 visible可见的,看得见
- 让元素隐藏
$("#abc").hide(); hide隐藏,躲避 - 让元素显示
$("#abc").show(); - 切换隐藏和显示
$("#abc").toggle(); toggle乒乓开关,触发器
###属性选择器
- $(“div[id]”) 匹配所有包含id属性的div
- $(“div[id=‘xxx’]” 匹配所有id值为xxx的div
- $(“div[id!=‘xxx’]” 匹配所有id值不为xxx的div
###子元素选择器 - $(“div:nth-child(n)”) 是div并且是第n个子元素 nth第n个
- $(“div:first-child”) 是div并且是第一个子元素 first第一个,首先 child孩子,产物
- $(“div:last-child”)是div并且是最后一个子元素
###表单选择器
- $(":input") 匹配所有控件
- $(":password") 匹配所有密码框
- $(":radio") 匹配所有单选框radio单选,无线电
- $(":checkbox") 匹配所有复选框checkbox 复选框
- $(":checked") 匹配所有选中的单选、多选、下拉选checked 检查
- $(“input:checked”) 匹配所有选中的单选和多选
- $(":selected") 匹配所有选中的下拉选 selected选,下拉选
####文档相关
- 创建元素
var div = $(“abc”); - 添加元素
- 最后面添加 $("#big").append(div);parent父母,根源
- 最前面添加 $("#big").prepend(div);
- 插入元素
- 插入到某个元素的前面 弟弟元素.before(div);before在…之前
- 插入到某个元素的后面 哥哥元素.after(div); after以后的
- 删除元素
- $("#abc").remove();remove间距,删除
- 修改元素样式
- $("#abc").css(“样式名称”,“值”);
- $("#abc").css({“样式1”:“值1”,“样式2”:“值2”}); //批量添加多个样式
- 获取和修改元素的文本内容 $("#abc").text(“xxx”);
- 获取和修改元素的html内容取代innerHTML $("#abc").html(“xxx”);
###获取和设置元素的属性
- $("#abc").attr(“class”,“c1”);
- $("#abc").attr(“class”);
###jQuery中事件相关
- 常见事件
- 鼠标事件: click 点击 mouseover 鼠标移入 mouseout 鼠标移出 mousedown 鼠标按下 mouseup 鼠标抬起 mousemove 鼠标移动
- 键盘事件: keydown 键盘按下 keyup 键盘抬起
- 状态改变事件: change 变化 submit 递交 $(function()) 页面加载完成 resize 尺寸改变调整大小
- 事件模拟
元素对象.trigger 触发(“事件名”); - 事件合并hover 徘徊,切换
//给div添加鼠标移入移出事件
$(“div”).hover(function(){//鼠标移入
$(“div”).css(“color”,“red”);
},function(){//鼠标移出
$(“div”).css(“color”,“green”);
});
####动画相关
if(this.value==“隐藏”){
$(“img”).hide(1000,function(){
alert(“看不见我了吧”);
});
}else if(this.value==“显示”){
$(“img”).show(1000);
}else if(this.value==“淡出”){
$(“img”).fadeOut(2000);
}else if(this.value==“淡入”){
$(“img”).fadeIn(2000);
}else if(this.value==“上滑”){
$(“img”).slideUp(2000);
}else if(this.value==“下滑”){
$(“img”).slideDown(2000);
}else{//自定义
$(“img”).animate({“left”:“200px”},1000)
.animate({“top”:“200px”},1000)
.animate({“left”:“0px”},1000)
.animate({“top”:“0px”},1000)
.animate({“width”:“200px”},1000)
.animate({“width”:“100px”},1000)
.fadeOut(2000,function(){
$(“img”).remove();
});
}