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")：返回不匹配标准的所有元素。
时间： 2024-10-01 06:49:05

Javascript随笔2（JQuery）的相关文章

在JavaScript中重写jQuery对象的方法

jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" value="

JavaScript强化教程——jQuery选择器

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p&

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu

Javascript Fromdata 与jQuery 实现Ajax文件上传

<!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css"> fo

JavaScript强化教程——jQuery - Chaining

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery - Chaining 通过 jQuery,您可以把动作/方法链接起来. Chaining 允许我们在一条语句中允许多个 jQuery 方法(在相同的元素上). jQuery 方法链接 直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条). 不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条. 提示:这样的话,

JavaScript强化教程——jQuery动画

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery动画 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画. 语法:$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性. 可选的 speed 参数规定效果的时长.它可以取以下值:"slow"."fast" 或毫秒

JavaScript对象与jQuery对象以及DOM对象

今天说一下JavaScript对象与jQuery对象和DOM对象的区别和转换,前面已经见过JavaScript对象的创建,但还是要重提 var variable =                     //这是一个JavaScript对象 var $variable = $()             //这就是个jQuery对象 var variable = document.get...                   //这是一个DOM对象,方法包括getElementById(

JavaScript强化教程——jQuery Callback 函数

本文为 H5EDU 机构官方 HTML5培训HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery Callback 函数 Callback 函数在当前动画 100% 完成之后执行. jQuery 动画的问题许多 jQuery 函数涉及动画.这些函数也许会将 speed 或 duration 作为可选参数.例子:$("p").hide("slow")speed 或 duration 参数可以设置许多不同的值,比如 "slow&qu

JavaScript强化教程——jQuery AJAX 实例

什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示.使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).l

javascript中(function($){...})(jQuery)写法是什么意思

在javascript中 (function($){...})(jQuery)的写法是什么意思. ======================================================================   //这是一条分割线. 首先 function(arg){ //.... } 这种形式的在javascript中称之为匿名函数.arg则是匿名函数的参数. 而(function($){ })(jQuery);这种形式则是执行匿名函数并且传递参数jQuery.