2019-06-10 学习日记 day31 JQ
JQ
jQuery是一个快速，简洁的javascript框架，是继Prototype之后有一个优秀的javascript代码块（或javascript框架）
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装javascript常用的功能代码，提供一种简便的javascript设计模式，优化HTML文档的操作，时间处理，动画设计和Ajax交互
jQuert的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口，具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jquery兼容各种主流浏览器
如：IE 6.0+ FF 1..5+ Safari 2.0+
Jquery的作用
将页面的js代码和HTML页面代码进行分离
JQ和JS之间的转换
JQ对象，只能调用JQ的属性和方法
JS对象 只能调用JS的属性和方法
<html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script> <script> function changeJs(){ var div =document.getElementById("div1"); //div.innerHTML = "成功了"; $(div).html("2"); } $(function(){ $("#btn2").click(function(){ var div =$("#div1"); var jsdiv = div.get(0); jsdiv.innerHTML = "1"; }) }) </script> </head> <body> <input type="button" value="js" onclick="changeJs()"/> <input type="button" value="js" id="btn2"/> <div id="div1">111111111111111</div> </body> </html>
JQuery选择器
让我们能够更加精确找到我们要操作的元素
基本选择器
ID选择器
类选择器
元素选择器 -标签名称
通配符选择器 -*
选择器，选择器
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../../css/style.css" /> <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script> <script> $(function(){ //ID选择器 $("#btn1").click(function(){ $("#two").css("background-color","red"); }) //类选择器 $("#btn2").click(function(){ $(".mini").css("background-color","palegreen"); }) //标签选择器 $("#btn3").click(function(){ $("div").css("background-color","palegreen"); }) $("#btn4").click(function(){ $(".mini,span").css("background-color","palegreen"); }) }) </script> </head> <body> <input type="button" value="找出id为two的元素" id="btn1"/> <input type="button" value="找出id为two的元素" id="btn2"/> <input type="button" value="div"" id="btn3"/> <input type="button" value="选择器1和2" id="btn4"/> <br /> <div id="one"> <div class="mini">1-1</div> </div> <div id="two"> <div class="mini">2-1</div> <div class="mini">2-2</div> </div> <div id="three"> <div class="mini">3-1</div> <div class="mini">3-2</div> <div class="mini">3-3</div> </div> <span id="three"> span </span> </body> </html>
层选择器
子元素选择器：选择器1 > 选择器2
后代选择器：选择器1
相邻选择器：选择器1+选择器2 ：相邻的一个
找出所有选择器：选择器1 ~ 选择器2：找出所有的选择器
<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../../css/style.css" /> <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script> <script> $(function(){ $("#btn1").click(function(){ $("body > div").css("background-color","red"); }) $("#btn2").click(function(){ $("body div").css("background-color","red"); }) $("#btn3").click(function(){ $("#one+#two").css("background-color","red"); }) $("#btn4").click(function(){ $("#one~div").css("background-color","red"); }) }) </script> </head> <body> <input type="button" value="子元素选择器" id="btn1"/> <input type="button" value="后代选择器" id="btn2"/> <input type="button" value="相邻的标签" id="btn3"/> <input type="button" value="找出所有" id="btn4"/> <br /> <div id="one"> <div class="mini">1-1</div> </div> <div id="two"> <div class="mini">2-1</div> <div class="mini">2-2</div> </div> <div id="three"> <div class="mini">3-1</div> <div class="mini">3-2</div> <div class="mini">3-3</div> </div> <span id="three"> span </span> </body> </html>
JQ的遍历
<html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="../../js/jquery-1.11.0.js"></script> <script> var city=["珠海市","中山市","江门市","佛山市"]; /* $(city).each(function(i,n){ console.log(i +"==="+n) }) */ $.each(city,function(i,n){ alert(i+"=="+n) }) </script> </head> <body> </body> </html>
<script> var city=["珠海市","中山市","江门市","佛山市"]; /* $(city).each(function(i,n){ console.log(i +"==="+n) }) */ /* $.each(city,function(i,n){ alert(i+"=="+n) }) */ function callback11(i,n){ console.log("123: "+i +n); } function bianli(arr,callback11){ for (var i = 0; i < arr.length; i++) { var item = arr[i]; callback11(i,item) } } bianli(city,callback11); </script>
：lt（） 小于
：gt（）大于
：eq（）等于
：input 找出所有输入项
过滤器
：selected
常用函数
prop（）properties
如果传入一个参数，就是获取
prop（图片路径）
设置图片路径
attr：操作一些自定义的属性 <>
prop：通常是用来操作元素固有属性的，建议使用prop来操作属性
css（）：修饰css样式
addClass（）添加一个class样式
removeClass（）移除
blur（）绑定失去焦点
focus（）绑定获取焦点事件
click：单击
dbclick：双击
change
append：给自己添加属性
appendTo：将自己添加到属性
prepend：在职子节点最前面添加子节点
after：在自己后面添加一个属性
before：在自己前面添加一个属性
$（"数组对象"）.each（function（index，data））
$.each(arr,function(index,data))
