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】 61. 序言：使用OpenGL ES显示图像

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

  2. webpack以及loader 加载命令

    module.exports={ entry:'./main/main.js', output:{ path:'./build', filename:'bundle.js' }, module:{ l ...

  3. 安装GPU版本的tensorflow填过的那些坑！---CUDA说再见！

    那些坑,那些说不出的痛! --------回首安装的过程,真的是填了一个坑又出现了一坑的感觉.记录下了算是自己的笔记也能给需要的人提供一点帮助. 1 写在前面的话 其实在装GPU版本的tensorfl ...

  4. Tomcat管理页面配置

    详情参考:http://www.365mini.com/page/tomcat-manager-user-configuration.htm 修改$CATALINA_BASE/conf/tomcat- ...

  5. HTML5头部标签中<meta>常用信息

    整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...

  6. es6知识总结--3

    es6知识总结--3 es6对咱们es3,es5的数据类型进行了升级下边说新APIs! js数据类型有Number.String .oject.Boolean.Null.Undefined六种数据类型 ...

  7. 在Docker容器中运行.Net Core web Api项目

    安装Docker环境 参考本人这篇<CentOS 7 下Docker的安装>文章进行安装以及环境配置,这里不做赘述. 通过.NetCore开发WebApi项目 1. 创建.Net Core ...

  8. CJOJ 1331 【HNOI2011】数学作业 / Luogu 3216 【HNOI2011】数学作业 / HYSBZ 2326 数学作业（递推，矩阵）

    CJOJ 1331 [HNOI2011]数学作业 / Luogu 3216 [HNOI2011]数学作业 / HYSBZ 2326 数学作业(递推,矩阵) Description 小 C 数学成绩优异 ...

  9. 计算BMI

    用一个小程序计算BMI 代码如下: package Day06; public class BMI { private String name; private int age; private do ...

  10. [noip 2015]运输计划 [LCA][树链剖分]

    用了luogu上的题目描述 题目背景 公元 2044 年,人类进入了宇宙纪元. 题目描述 L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条航道连通了 L 国的 ...