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. MATLAB命令大全和矩阵操作大全

    转载自: http://blog.csdn.net/dengjianqiang2011/article/details/8753807 MATLAB矩阵操作大全 一.矩阵的表示在MATLAB中创建矩阵 ...

  2. 【LeetCode】160. Intersection of Two Linked Lists

    题目: Write a program to find the node at which the intersection of two singly linked lists begins. Fo ...

  3. 使用base64提升视觉效果体验

    最近在做一个微信端的小项目,前端代码写完后,就放在手机端测试,没什么问题,但是页面在加载和渲染时的效果却让人有些不爽,虽然是个小项目,我大可不必做这些,但是看着页面的闪动,就忍不住想做些什么. 先说说 ...

  4. tp5框架的获取器

    tp5的获取器功能很强大,一下子就喜欢上了,你可以在模块里任意定义表里不存在的字段,在前台调用很方便.话不多说直接上demo: 1.命名规则   get + 属性名的驼峰命名+ Attr 直接就能在m ...

  5. Java纸牌小demo以及日历小demo

    //卡牌类 public class Card { //定义卡牌的点数 public static final String[] cardName = { "3", "4 ...

  6. python打印万年历

    1.输入年份,输入月份 2.格式化输出本月的日历 3.思路 输入年,月,打印对应年月的日历.1,首先1970年是Unix系统诞生的时间,1970年成为Unix的元年,1970年1月1号是星期四,现在大 ...

  7. fedora下一些问题的解决方案汇总

    解决fedora下一些使用问题 一 解决fedora下无法使用Fn+功能键来调整亮度的问题 在fedora下,背光的配置参数在/sys/class/backlight文件夹下,根据不同的显卡,有不同的 ...

  8. Laravel安装及环境的配置（XAMPP集成开发环境下）

    Laravel 使用 Composer 来管理代码依赖.所以,在使用 Laravel 之前,请先确认你的电脑上安装了 Composer. 操作系统为win7: 集成开发环境XAMPP: 第一步:安装C ...

  9. 如何使用OLAMI自然语言理解开放平台API制作自己的智能对话助手小程序

    我们经常在电影中看到机器和人对答如流,随着越来越多自然语言开放平台的出现,IT爱好者制作一个自己的APP或者小玩具等逐渐可以变为现实. 自然语言对话即你的APP或者你制作的工具.机器人等能够对用户输入 ...

  10. 一个move_uploaded_file()引起的PHP异常与错误的深入理解

    背景:我在公司开发一个产品Excel导入到数据库的功能,写起来挺快的,用phpexcel几下就写好了,本地测试挺顺的,git push上去,项目负责人部署到测试环境,就出现问题了.具体问题一句话不好说 ...