jQuery笔记

###JQuery
####什么是JQuery

• 是一个通过JavaScript代码写的 关于JavaScript的框架
• 用来简化js代码
• 可以像css一样通过选择器获取元素
• 可以快速修改元素的样式

####如何引入jQuery

• 因为jQuery就是一个js文件 所以引入方式和引入一个普通的js文件一样

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

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

1. 把js转成jq

    /* 得到js对象 */
   

   var input = document.getElementById(“myinput”);
   /* 把js对象转成jQuery对象 /
   / $是jQuery单词的缩写 $=jQuery /
   var $jq = $(input);
   / 弹出文本框的value值 */

2. 把jq转成js

    /* 得到jq对象 */
   

   var $jq = $("#myinput");
   /* 把jq转成js对象 */
   //第一种写法
   var js1 = $jq[0];
   //第二种写法
   var js2 = $jq.get(0);
   alert(js1.value+"="+js2.value);

###选择器
####基础选择器

1. 标签名选择器
   var $div = $(“div”);
2. id选择器
   var $div = $("#id");
3. 类选择器
   var $div = $(".class");
4. 分组选择器
   var $div = $(“div,#id,.class”);
5. 任意元素选择器
   var $div = $("*");
   ###层级选择器
6. $(“div span”) 匹配div下所有的span元素
7. $(“div>span”) 匹配div的所有span子元素
8. $(“div+span”) 匹配div相邻的后面的兄弟span元素
9. $(“div~span”) 匹配div后面所有的兄弟span元素
   ###层级函数 当得到某个元素对象后 需要获得该元素的相关元素的时候使用
10. 获取元素的所有兄弟元素
    $("#abc").siblings(“div”);
11. 获取元素的哥哥元素
    $("#abc").prev(“div”);
12. 获取元素的哥哥们元素
    $("#abc").prevAll(“div”);
13. 获取元素的弟弟元素
    $("#abc").next(“div”);
14. 获取元素的弟弟们元素
    $("#abc").nextAll(“div”);
    ###过滤选择器
15. $(“div:first”)匹配所有div中的第一个
16. $(“div:last”)匹配所有div中的最后一个
17. $(“div:even”)匹配所有div中的偶数 从0开始
18. $(“div:odd”)匹配所有div中的奇数 从0开始
19. $(“div:eq(n)”) 匹配所有div中下标等于n的 从0开始
20. $(“div:lt(n)”) 匹配所有div中下标小于n的 从0开始
21. $(“div:gt(n)”) 匹配所有div中下标大于n的 从0开始
22. $(“div:not(.abc)” 匹配所有div中class值不等于abc
    ###内容选择器
23. $(“div:has§”) 匹配所有包含p标签的div
24. $(“div:empty”) 匹配所有空的div
25. $(“div:parent”)匹配所有非空的div
26. $(“div:contains(‘abc’)”) 匹配包含abc文本内容的div
    ###可见选择器
27. $(“div:hidden”) 匹配所有隐藏的div
28. $(“div:visible”)匹配所有可见的div
    ###显示隐藏相关的函数
29. 让隐藏的元素显示
    $(“div:hidden”).show();
30. 让显示额元素隐藏
    $(“div:visible”).hide();
31. 切换隐藏和显示状态
    $("#abc").toggle();
    ###属性选择器
32. $(“div[id]”) 匹配所有有id属性的div元素
33. $(“div[id=‘abc’]”) 匹配有id属性值为abc的所有div
34. $(“div[id!=‘abc’]”) 匹配有id属性值不为abc的所有div
    ###子元素选择器
35. $(“div:nth-child(n)”) 获取div中第n个子元素 从1开始
36. $(“div:first-child”) 获取div中第1个子元素
37. $(“div:last-child”) 获取div中最后一个子元素
    ###表单选择器
38. $(":input") 匹配所有 文本框 密码框 单选 多选 下拉选 文本域 按钮
39. $(":password") 匹配所有密码框
40. $(":radio")匹配所有单选
41. $(":checkbox")匹配所有多选（复选框）
42. $(":checked")匹配所有被选中的 单选、多选、下拉选
43. $(“input:checked”) 匹配所有被选中的 单选、多选
44. $(":selected") 匹配被选中的下拉选

###和页面(DOM)相关

1. 创建元素
   var div = document.createElement(“div”);
   var $div = $(“

   abc
   ”);

2. 添加到页面中
   KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲big").append(div); //添加到最后面
   KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲big").prepend(div);//添加到最前面

3. 插入元素
   兄弟元素.after(新元素) 加载兄弟元素的后面
   兄弟元素.before(新元素) 加载兄弟元素的前面
   //添加到二哥前面 before
   $("h1:contains{(}^{\prime }{二}^{\prime })").before($h1);
   //添加到二哥的后面 after
   $("h1:contains{(}^{\prime }{二}^{\prime })").after($h1);

4. 删除元素

• 通过自己删除 $("#id").remove();
• 先匹配到所有的指定类型元素 从里面删除某些元素 $(“div”).remove("#abc");

5. 修改元素的样式css
   $(“div”).css(“color”,“red”);
   $(“div”).css({“color”：“red”，”background-color”:”green”});

6. 属性
   $("#abc").attr(“id”); 获取id的属性值
   $("#abc").attr(“class”,“aaa”); 给元素添加class属性值为aaa

7. 文本
   $("#abc").text() 获取文本内容
   $("#abc").text(“啊啊啊”) 赋值文本内容

8. html
   $("#abc").html() 获取文本内容
   $("#abc").html(“

   啊啊啊

   ”) 赋值文本内容
   ###获得元素的子元素和父元素
   children()得到所有子元素
   parent()得到父元素

###jq事件相关内容
####常见事件

1. 鼠标相关： click 点击 mouseover mouseout mousedown mouseup mousemove
2. 键盘： keydown keyup
3. 状态： $(function(){}) focus blur submit resize窗口尺寸改变 change当value值发生改变时的事件
   ####事件模拟
   //开启定时器
   setInterval(function(){
   //模拟事件
   $(“input”).trigger(“click”);
   },3000);

hover事件合并函数

• hover(fn1,fn2); 等效 mouseover + mouseout

    $("div").hover(function(){
    	$("div").css("color","red");
    },function(){
    	$("div").css("color","green");
    })
  

###动画相关

function fn1(){//隐藏
	$("img").hide(3000);
}
function fn2(){//显示
	$("img").show(3000,function(){
		alert("啦啦啦"); 
	});
}
function fn3(){//滑出
	$("img").slideUp(2000);
}
function fn4(){//滑入
	$("img").slideDown(2000);
}
function fn5(){//淡入
	$("img").fadeIn(2000);
}
function fn6(){//淡出
	$("img").fadeOut(2000);
}
function fn7(){//自定义
	$("img").animate({"left":"250px"},1000)
		.animate({"top":"250px"},1000)
		.animate({"left":"0px"},1000)
		.animate({"top":"0px"},1000)
		.fadeOut(2000,function(){
			$(this).remove();
		});
}

###音频视频播放

<!-- autoplay自动播放  loop循环播放 controls显示播放面板-->
<!-- <audio src="music.mp3" autoplay="autoplay"
	loop="loop" controls="controls"></audio> -->
	<!-- poster视频封面 -->
	<video poster="../imgs/k.jpg" controls="controls">
<source src="hero.mp4">
	</video>