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. [leetcode-521-Longest Uncommon Subsequence I]

    Given a group of two strings, you need to find the longest uncommon subsequence of this group of two ...

  2. 【Android Developers Training】 36. 设置文件共享

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

  3. SQLyog简介

    一.软件简介 SQLyog 是一个快速而简洁的图形化管理MYSQL数据库的工具,它能够在任何地点有效地管理你的数据库.SQLyog是业界著名的Webyog公司出品的一款简洁高效.功能强大的图形化MyS ...

  4. Unity 游戏框架搭建 (一) 概述

      为了重构手头的一款项目,翻出来当时未接触Unity时候收藏的视频<Unity项目架构设计与开发管理>,对于我这种初学者来说全是干货.简单的总结了一下,以后慢慢提炼. 关于Unity的架 ...

  5. Python3控制结构与函数

    1.if语句的另一种写法: expression1 if boolean_expression else expression2 boolean_expression为true时使用expressio ...

  6. web项目直接在浏览器上访问不需要带.jsp，直接ip地址加项目名 在web.xml里配置

    web.xml最上方 <welcome-file-list> <welcome-file> /view/login.jsp </welcome-file> < ...

  7. 一次C++调试记录

         之前开发用Linux C比较多,C++中的STL 容器基本没有接触过.最近在学习C++,平时用到c++ 17中的部分新特性,下面就简单分享下自己C++的学习流程. 一.环境搭建      本 ...

  8. Kinect 常用识别手势

    以下手势能被流畅的识别: ◎RaiseRightHand / RaiseLeftHand – 左手或右手举起过肩并保持至少一秒 ◎Psi –双手举起过肩并保持至少一秒 ◎Stop – 双手下垂. ◎W ...

  9. JavaScript+canvas 绘制多边形

    效果图: <body> <canvas id="square" width="500"></canvas> <canv ...

  10. Sql 2008R2 windows身份好用 ，sa身份不好用

    Sql server2008r2 安装完毕以后 windows身份验证好用,sa身份不好用,解决方法步骤如下: 1.首先用windows身份登录 2.SQL实例右键属性 3.安全性这一项 4.选择wi ...