###web前端###jquery

jquery###选择器###事件###动画
###jQuery

• 什么是jQuery：是一个js框架，可以让程序员写的更少但实现的更多，此框架本身就是由js语言缩写
• jQuery优势：

1. 简化js代码
2. 可以像css一样获取元素 #abc $("#abc")
3. 可以批量修改元素的样式
   var arr = document.getElementsByTagName(“div”);
   for(var i=0;i<arr.length;i++){
   arr[i].style.color = “red”;
   }
   $(“div”).css(“color”,“red”);
4. 解决部分兼容性问题

####如何引入jQuery框架

• 因为jq就是通过js代码所写，所以引入此框架和引入普通的js文件方式一样

    <script type="text/javascript" 
     src="../js/jquery-1.4.2.js"></script>
  

####jq事件的动态绑定

	$("#btn").click(function(){
		alert("点击了！");
	});

####js对象和jq对象相互转换

1. js转jq
   var jq = $(js);
2. jq转js
   var js = jq[0];
   ###jQuery的选择器
3. 基础选择器

• 标签名选择器 $(“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
• 层级函数：
  1. 获取元素的所有兄弟元素
     $("#abc").siblings() 得到id为abc的所有兄弟元素 sibling兄弟姐妹
     $("#abc").siblings(“div”) 得到id为abc的所有div兄弟元素
  2. 获取元素的哥哥元素
     $("#abc").prev() 得到id为abc的任意哥哥元素 == prev上一个，先前的==
     $("#abc").prev(“div”) 得到id为abc的div哥哥元素
  3. 获取元素的哥哥们元素
     $("#abc").prevAll() 得到id为abc的哥哥们元素
     $("#abc").prevAll(“div”) 得到id为abc的div哥哥们元素
  4. 获取元素的弟弟元素
     $("#abc").next() 得到id为abc的弟弟元素
  5. 获取元素的弟弟们元素
     $("#abc").nextAll() 得到id为abc的弟弟们元素
     ###过滤选择器

1. $(“div:first”) 匹配所有div中的第一个元素 first第一，首先
2. $(“div:last”) 匹配所有div中的最后一个元素
3. $(“div:even”) 匹配所有div中下标为偶数的 从0开始
4. $(“div:odd”) 匹配所有div中下标为奇数的 从0开始
5. $(“div:eq(n)”) 匹配所有div中下标为n的元素 从0开始
6. $(“div:lt(n)”) 匹配所有div中下标小于n的元素
7. $(“div:gt(n)”）匹配所有div中下标大于n的元素
8. $(“div:not(.one)”) 匹配所有div中 class值不为one的
   ###内容选择器
9. $(“div:has§”) 匹配所有包含p子元素的div元素
10. $(“div:empty”) 匹配所有空的div == empty空的==
11. $(“div:parent”) 匹配非空div == parent父母，根源==
12. $(“div:contains(‘xxx’)”) 匹配所有包含xxx文本的div contain包含，容纳
    ###可见选择器
13. $(“div:hidden”) 匹配所有隐藏的div元素 == hidden隐藏的，秘密的==
14. $(“div:visible”) 匹配所有显示的div元素 visible可见的，看得见

• 让元素隐藏
  $("#abc").hide(); hide隐藏，躲避
• 让元素显示
  $("#abc").show();
• 切换隐藏和显示
  $("#abc").toggle(); toggle乒乓开关，触发器
  ###属性选择器

1. $(“div[id]”) 匹配所有包含id属性的div
2. $(“div[id=‘xxx’]” 匹配所有id值为xxx的div
3. $(“div[id!=‘xxx’]” 匹配所有id值不为xxx的div
   ###子元素选择器
4. $(“div:nth-child(n)”) 是div并且是第n个子元素 nth第n个
5. $(“div:first-child”) 是div并且是第一个子元素 first第一个，首先 child孩子，产物
6. $(“div:last-child”)是div并且是最后一个子元素

###表单选择器

1. $(":input") 匹配所有控件
2. $(":password") 匹配所有密码框
3. $(":radio") 匹配所有单选框radio单选，无线电
4. $(":checkbox") 匹配所有复选框checkbox 复选框
5. $(":checked") 匹配所有选中的单选、多选、下拉选checked 检查
6. $(“input:checked”) 匹配所有选中的单选和多选
7. $(":selected") 匹配所有选中的下拉选 selected选，下拉选

####文档相关

1. 创建元素
   var div = $(“
   abc
   ”);
2. 添加元素

• 最后面添加 $("#big").append(div);parent父母，根源
• 最前面添加 $("#big").prepend(div);

3. 插入元素

• 插入到某个元素的前面 弟弟元素.before(div);before在…之前
• 插入到某个元素的后面 哥哥元素.after(div); after以后的

4. 删除元素

• $("#abc").remove();remove间距，删除

5. 修改元素样式

• $("#abc").css(“样式名称”,“值”);
• $("#abc").css({“样式1”:“值1”,“样式2”:“值2”}); //批量添加多个样式

6. 获取和修改元素的文本内容 $("#abc").text(“xxx”);
7. 获取和修改元素的html内容取代innerHTML $("#abc").html(“xxx”);

###获取和设置元素的属性

• $("#abc").attr(“class”,“c1”);
• $("#abc").attr(“class”);

###jQuery中事件相关

1. 常见事件

• 鼠标事件： click 点击 mouseover 鼠标移入 mouseout 鼠标移出 mousedown 鼠标按下 mouseup 鼠标抬起 mousemove 鼠标移动
• 键盘事件: keydown 键盘按下 keyup 键盘抬起
• 状态改变事件： change 变化 submit 递交 $(function()) 页面加载完成 resize 尺寸改变调整大小

2. 事件模拟
   元素对象.trigger 触发(“事件名”);
3. 事件合并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();
   });
   }