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")：返回不匹配标准的所有元素。

 

 

posted @ 2017-08-15 01:41  _TBHacker  阅读(382)  评论(0)  编辑  收藏  举报