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() - 设置或返回表单字段的值
 $("#btn1").click(function(){

   alert("Text: " + $("#test").text());

 });

 $("#btn2").click(function(){

   alert("HTML: " + $("#test").html());

 });

获取标签属性 - attr()

获取：

 $("button").click(function(){

   alert($("#w3s").attr("href"));

 });

设置（单属性设置和多属性设置）：

 $("button").click(function(){

   $("#w3s").attr("href","http://www.w3school.com.cn/jquery");

 });

 $("button").click(function(){

   $("#w3s").attr({

     "href" : "http://www.w3school.com.cn/jquery",

     "title" : "W3School jQuery Tutorial"

   });

 });

6.jQuery - 添加/删除元素

添加HTML内容方法：append()【后添加】，prepend()【前添加】，after()【选定元素后添加】，before()【选定元素前添加】

 function afterText()

 {

 var txt1="<b>I </b>";                    // 以 HTML 创建新元素

 var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素

 var txt3=document.createElement("big");  // 通过 DOM 创建新元素

 txt3.innerHTML="jQuery!";

 $("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素

 $("p").append(txt1,txt2,txt3);         // 追加新元素

 }

删除HTML元素方法：remove()，empty()

 $("#div1").remove();  //删除被选元素及其子元素

 $("p").remove(".italic");  //删除类为“italic”的所有p元素
 $("#div1").empty();    //删除被选元素的子元素

7.jQuery - 获取并设置 CSS 类

操作CSS的方法：

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

外部：

 <!DOCTYPE html>

 <html>

 <head>

 <script src="/jquery/jquery-1.11.1.min.js">

 </script>

 <script>

 $(document).ready(function(){

   $("button").click(function(){

     $("h1,h2,p").toggleClass("blue");

   });

 });

 </script>

 <style type="text/css">

 .blue

 {

 color:blue;

 }

 </style>

 </head>

 <body>

 <h1>标题 1</h1>

 <h2>标题 2</h2>

 <p>这是一个段落。</p>

 <p>这是另一个段落。</p>

 <button>切换 CSS 类</button>

 </body>

 </html>

内部：

 //设置单个属性

 $("p").css("background-color","yellow");

 //设置多个属性

 css({"propertyname":"value","propertyname":"value",...});

8.jQuery - 尺寸

处理尺寸的方法：

  • width()：设置或返回元素的宽度（不包括内边距、边框或外边距）。
  • height()：设置或返回元素的高度（不包括内边距、边框或外边距）。
  • innerWidth()：返回元素的宽度（包括内边距）。
  • innerHeight()：返回元素的高度（包括内边距）。
  • outerWidth()：返回元素的宽度（包括内边距和边框）。
  • outerHeight()：返回元素的高度（包括内边距和边框）。
  • outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距）。
  • outerHeight(true) 返回元素的高度（包括内边距、边框和外边距）。
 $("button").click(function(){

   var txt="";

   txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";

   txt+="Outer height (+margin): " + $("#div1").outerHeight(true);

   $("#div1").html(txt);

 });

Tips：

$(document).height()和$(window).height() 可以获得文档和窗口的尺寸

9.jQuery 遍历

遍历的方法：

  • parent()：返回被选元素的直接父元素。
  • parents()：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。（可过滤）
  • parentsUntil()：返回介于 <span> 与 <div> 元素之间的所有祖先元素：
 $(document).ready(function(){

   $("span").parentsUntil("div");

 });
  • children()：返回被选元素的所有直接子元素，只会向下一级对 DOM 树进行遍历。
  • find()：返回被选元素的后代元素，一路向下直到最后一个后代。
 //下面例子返回属于 <div> 后代的所有 <span> 元素：

 $(document).ready(function(){

   $("div").find("span");

 });

 //下面的例子返回 <div> 的所有后代：

 $(document).ready(function(){

   $("div").find("*");

 });
  • siblings()：返回被选元素的所有同胞元素。
  • next()：返回被选元素的下一个同胞元素。
  • nextAll()：返回被选元素的所有跟随的同胞元素。
  • nextUntil()：返回介于两个给定参数之间的所有跟随的同胞元素。
  • prev()【以下三个与上面类似，遍历方向向上】
  • prevAll()
  • prevUntil()
  • eq()：返回被选元素中带有指定索引号的元素。
  • filter(".intro")：方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
  • not(".intro")：返回不匹配标准的所有元素。

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

  1. 编写Javascript类库（jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  2. 在JavaScript中重写jQuery对象的方法

    jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序 ...

  3. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  4. JavaScript强化教程——jQuery UI API 类别

    ---恢复内容开始--- 主要介绍:JavaScript强化教程​—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...

  5. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

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

    前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script ...

  7. Javascript Fromdata 与jQuery 实现Ajax文件上传

    <!DOCTYPE html> <html> <head> <title>ajax</title> <script type=&quo ...

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

    javascript中(function($){...})(jQuery)写法是什么意思   这里实际上是匿名函数function(arg){...}这就定义了一个匿名函数,参数为arg 而调用函数 ...

  9. JavaScript ,Css and Jquery In OpenERP 7.0

    From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...

  10. JavaScript进阶内容——jQuery

    JavaScript进阶内容--jQuery 我们在前面的文章中已经掌握了JavaScript的全部内容,现在让我们了解一下JavaScript库 这篇文章主要是为了为大家大致讲解JavaScript ...

随机推荐

  1. 【Android Developers Training】 42. 从另一台设备接收文件

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. USACO Dynamic Programming (1)

    首先看一下题目: Introduction Dynamic programming is a confusing name for a programming technique that drama ...

  3. Thrift总结(二)创建RPC服务

    前面介绍了thrift 基础的东西,怎么写thrift 语法规范编写脚本,如何生成相关的语言的接口.不清楚的可以看这个<Thrift总结(一)介绍>.做好之前的准备工作以后,下面就开始如何 ...

  4. AutoMapper 6.x 扩展

    简介 很多时候我们使用AutoMapper的时候,都需要进行一个配置才可以使用Mapper.Map<Source,Target>(entity);.如果不进行配置则会报错. 如果实体过多, ...

  5. （转载）oracle的v$sqlarea表

    原文摘自:http: [V$SQLAREA]  本视图持续跟踪所有shared pool中的共享cursor,在shared pool中的每一条SQL语句都对应一列.本视图在分析SQL语句资源使用方面 ...

  6. spring +springmvc+mybatis组合web.xml文件配置

    <?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://w ...

  7. 进击的AssetBundles和它的工具们

    0x00 前言 周末的时候在家看了下去年的Unite16 LA的视频.其中一个session很有趣,是AssetBundles开发团队Reichert的一个"总结过往,畅想未来"的 ...

  8. Unity-Shader-光照模型之漫反射

    [旧博客转移 - 2016年4月3日 23:27] 前面的话: 在现实生活中,我们看见能看见的东西都是光反射出来的颜色,如果反射光太弱,或者没有进入你的视角范围,你看到的就是黑色的. 在游戏中光分为几 ...

  9. ansible的安装

    安装 ansible-server的安装 client需要有python2.5以上 的python server和client都关闭了selinux server端: 网址: http://www.a ...

  10. HttpClient以json形式的参数调用http接口并对返回的json数据进行处理（可以带文件）

    1.参数的url就是被调用的地址,map是你要传的参数.参数转成json我使用的是gson方式转换的. 主要使用的jar包有httpclient-4.5.3.jar.httpcore-4.4.6.ja ...