Javascript随笔2（JQuery）
Posted _TBhonker
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript随笔2（JQuery）相关的知识，希望对你有一定的参考价值。
1.jQuery 语法
Tips：
通过 CDN（内容分发网络）引用JQuery：（link的引用最好放在script的引用之前）
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="Tab.js"></script>获取CDN网址：http://cdn.code.baidu.com/
jQuery 语法是为 html 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(document).ready(function()中的ready是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
2.jQuery 选择器
- 元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
- 属性选择器
$("[href]") 选取所有带有 href 属性的元素。
$("[href=‘#‘]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!=‘#‘]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=‘.jpg‘]") 选取所有 href 值以 ".jpg" 结尾的元素。
- CSS选择器
把所有 p 元素的背景颜色更改为红色
$("p").css("background-color","red");
3.jQuery 事件方法
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
JQuery事件完整版请看：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
4.jQuery动画效果
- 隐藏/显示
方法：hide，show
语法：（speed表示显示/隐藏速度，其值可以为：“fast”，“slow”或者毫秒，callback表示执行完后运行的函数）
$(selector).hide(speed,callback)；
$(selector).show(speed,callback);
- 淡入淡出
方法：fadeIn()【淡入】，fadeOut()【淡出】，fadeToggle()【淡入淡出交互】，fadeTo()【允许给透明度opacity】
语法：$(selector).fadeIn(speed,callback);（前三个方法类同）
$(selector).fadeTo(speed,opacity,callback);
- 滑动
方法：slideDown()【下滑】，slideUp()【上滑】，slideToggle()【上下交互滑动】
语法：$(selector).slideDown(speed,callback);（其他方法类似）
- 动画
tips：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，得先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
方法：animate()
语法：$(selector).animate({params},speed,callback);（params用于设置动画的CSS属性，CSS使用相对值时可用"+="或"-="）
- 动画STOP
方法：stop（）
语法：$(selector).stop(stopAll,goToEnd);（stopAll参数规定是否应该清除动画队列，默认是false；goToEnd参数规定是否立即完成当前动画，默认是false）
- JQuery方法链接
例：$("#p1").css("color","red").slideUp(2000).slideDown(2000);
该方法的效果是："p1" 元素首先会变为红色，然后向上滑动，然后向下滑动
5.jQuery - 获得内容和属性
获得内容 - text()、html() 以及 val()：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
1 $("#btn1").click(function(){ 2 alert("Text: " + $("#test").text()); 3 }); 4 $("#btn2").click(function(){ 5 alert("HTML: " + $("#test").html()); 6 });
获取标签属性 - attr()
获取：
1 $("button").click(function(){ 2 alert($("#w3s").attr("href")); 3 });设置（单属性设置和多属性设置）：
1 $("button").click(function(){ 2 $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); 3 }); 4 5 6 $("button").click(function(){ 7 $("#w3s").attr({ 8 "href" : "http://www.w3school.com.cn/jquery", 9 "title" : "W3School jQuery Tutorial" 10 }); 11 });
6.jQuery - 添加/删除元素
添加HTML内容方法：append()【后添加】，prepend()【前添加】，after()【选定元素后添加】，before()【选定元素前添加】
1 function afterText() 2 { 3 var txt1="<b>I </b>"; // 以 HTML 创建新元素 4 var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素 5 var txt3=document.createElement("big"); // 通过 DOM 创建新元素 6 txt3.innerHTML="jQuery!"; 7 $("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素 8 $("p").append(txt1,txt2,txt3); // 追加新元素 9 10 }
删除HTML元素方法：remove()，empty()
1 $("#div1").remove(); //删除被选元素及其子元素 2 3 $("p").remove(".italic"); //删除类为“italic”的所有p元素1 $("#div1").empty(); //删除被选元素的子元素
7.jQuery - 获取并设置 CSS 类
操作CSS的方法：
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
外部：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <script src="/jquery/jquery-1.11.1.min.js"> 5 </script> 6 <script> 7 $(document).ready(function(){ 8 $("button").click(function(){ 9 $("h1,h2,p").toggleClass("blue"); 10 }); 11 }); 12 </script> 13 <style type="text/css"> 14 .blue 15 { 16 color:blue; 17 } 18 </style> 19 </head> 20 <body> 21 22 <h1>标题 1</h1> 23 <h2>标题 2</h2> 24 <p>这是一个段落。</p> 25 <p>这是另一个段落。</p> 26 <button>切换 CSS 类</button> 27 </body> 28 </html>内部：
1 //设置单个属性 2 $("p").css("background-color","yellow"); 3 4 //设置多个属性 5 css({"propertyname":"value","propertyname":"value",...});
8.jQuery - 尺寸
处理尺寸的方法：
- width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
- height()：设置或返回元素的高度（不包括内边距、边框或外边距）。
- innerWidth()：返回元素的宽度（包括内边距）。
- innerHeight()：返回元素的高度（包括内边距）。
- outerWidth()：返回元素的宽度（包括内边距和边框）。
- outerHeight()：返回元素的高度（包括内边距和边框）。
- outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）。
- outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）。
1 $("button").click(function(){ 2 var txt=""; 3 txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; 4 txt+="Outer height (+margin): " + $("#div1").outerHeight(true); 5 $("#div1").html(txt); 6 });Tips：
$(document).height()和$(window).height() 可以获得文档和窗口的尺寸
9.jQuery 遍历
遍历的方法：
- parent()：返回被选元素的直接父元素。
- parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。（可过滤）
- parentsUntil()：返回介于 <span> 与 <div> 元素之间的所有祖先元素：
1 $(document).ready(function(){ 2 $("span").parentsUntil("div"); 3 });
- children()：返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历。
- find()：返回被选元素的后代元素，一路向下直到最后一个后代。
1 //下面例子返回属于 <div> 后代的所有 <span> 元素： 2 $(document).ready(function(){ 3 $("div").find("span"); 4 }); 5 6 //下面的例子返回 <div> 的所有后代： 7 $(document).ready(function(){ 8 $("div").find("*"); 9 });
- siblings()：返回被选元素的所有同胞元素。
- next()：返回被选元素的下一个同胞元素。
- nextAll()：返回被选元素的所有跟随的同胞元素。
- nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()【以下三个与上面类似，遍历方向向上】
- prevAll()
- prevUntil()
- eq()：返回被选元素中带有指定索引号的元素。
- filter(".intro")：方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
- not(".intro")：返回不匹配标准的所有元素。
以上是关于Javascript随笔2（JQuery）的主要内容，如果未能解决你的问题，请参考以下文章