jQuery是一个流行的JavaScript库,提供了HTML操作,CSS操作,事件,动画,Ajax和常用插件,极大地简化了JavaScript的开发.

可以从jquery.com下载jQuery库, 包含压缩版本和开发者版本.

在HTML文件中添加script标签来使用jQuery:<script src="jquery-1.10.2.min.js"></script>

如果不想下载并保存jQuery可以使用内容分发网络(CDN)来获得jQuery:

baidu:<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
sina: <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
google:<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
ms: <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

使用CDN获得jQuery可以利用其缓存加快速度.

HTML

选择器

jQuery选择器用于选择HTML元素,所有选择器均以$开头.

元素选择器用于根据元素名(TagName)来选择元素:

$('p'); //选择所有<p>元素

id选择器用于根据id选择元素:

$('#p1'); //选择id='p1'的元素

class选择器根据class选择元素:

$('.p'); //选择class='p'的元素

特殊选择器:

$(document) 选择文档节点
$('*') 选择所有节点

上述基本选择器与DOM接口的三个常用的getElement方法类似.

选择器还有更强大的表达能力:

选择class='intro'的<p>元素:

$("p.intro");

选择带有href属性的元素:

$('[href]')

选择href='url'的<a>元素:

$('a[href='url']')

选择href!='url'的<a>元素:

$('a[href!='url']')

选择第一个<p>元素:

$('p:first')

选择<ul>元素中第一个<li>元素:

$('ul li:first')

元素访问与操作

html()

html用于访问和修改节点的HTML内容,拥有3种调用方式:

html()以String返回节点的HTML内容
html(htmlString)设置节点的HTML内容
html(function(index,html){})使用回调函数替换HTML内容

当选择器选择了多个元素时,html()只会处理其中第一个元素.

<!DOCTYPE html>

<html>

<body>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <p id="p1">Hello World!</p>

    <script type="text/javascript">

        p = $('#p1');

        alert(p.html());

        p.html('Hello World from jQuery!');

    </script>

</body>

</html>

alert:

Hello World!

HTML:

<p id="p1">Hello World from jQuery!</p>

回调函数接受两个参数index和html,index代表当前节点在父节点子树中的索引从0开始, html代表当前节点的html内容, 参数返回值作为当前节点新的HTML内容进行更新.

<!DOCTYPE html>

<html>

<body>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <div>

    <p id="p1">Hello World!</p>

    </div>

    <script type="text/javascript">

        p = $('#p1');

        f = function(index, html) {

            return 'paragraph ' + (index+1) + ': '+ html + '<br>By jQuery';

        };

        p.html(f);

    </script>

</body>

</html>

HTML:

<p id="p1">paragraph 1: Hello World!<br>by jQuery</p>

text()

text()的三种调用与html()相同, 不同之处在于text()去除了子树中的HTML元素只返回文本内容.

当选择了多个元素时text()会将它们的文本内容合并为一个字符串.

使用text()更新文本内容时,此方法会将HTML标签进行转义, <被替换为<,>被替换为>.

我们将上述示例改用text()实现:

<!DOCTYPE html>

<html>

<body>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <div>

    <p id="p1">Hello World!</p>

    <p id="p2">Hello jQuery</p>

    </div>

    <script type="text/javascript">

        p = $('p');

        alert(p.text())

        f = function(index, html) {

            return 'paragraph ' + (index+1) + ': '+ html + '<br>by jQuery';

        };

        p.text(f);

    </script>

</body>

</html>

alert:

Hello World!Hello jQuery!

HTML:

<p id="p1">paragraph 1: Hello World!&lt;br&gt;by jQuery</p>

<p id="p2">paragraph 2: Hello jQuery&lt;br&gt;by jQuery</p>

val()

val()用于访问或操作表单的输入,拥有与html()类似的三种调用.

对于text,password, hidden, select型的输入框, val()可以访问或操作其输入的值:

<!DOCTYPE html>

<html>

<body>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <form>

        <label>username: <input id="username" type="text"/></label>

        <br><br>

        <label>password:<input id="password" type="password"/></label>

        <button id="btn">Click Me!</button>

    </form>

    <script type="text/javascript">

        input = $('#username').val('finley')

        $('#btn').click(function() {

            alert($('#username').val())

        });

    </script>

</body>

</html>

attr()

attr()同样拥有3种调用调用,与html()不同的是它的第一个参数为指定属性名的字符串:

<!DOCTYPE html>

<html>

<body>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <a id="a1" href="http://www.baidu.com">www.baidu.com</a>

    <br>

    <a id="a2" href="http://www.cnblogs.com">www.cnblogs.com</a>

    <script type="text/javascript">

        alert($('#a1').attr("href"));

        $('#a1').attr("href", "https://www.google.com.hk")

        $('#a2').attr("href", function(index, html) {

            return html + "/Finley/";

        });

    </script>

</body>

</html>

jQuery学习笔记

添加/删除元素

jQuery提供了4个常用的添加HTML节点的方法:

append(): 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容

插入的内容可以是HTML源码,jQuery或DOM创建的元素:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <div>

        <p>Hello World!</p>

        <button id="append">Append</button>

    </div>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

    $(document).ready(function(){

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

            // using HTML

            var txt1="<p>something</p>";

            // using jQuery

            var txt2=$("<p></p>").text("very");

            // using DOM

            var txt3=document.createElement("p");

            txt3.innerHTML="exciting";

            $("body").append(txt1,txt2,txt3);

        });			// using jQuery

            var txt2=$("<p></p>").text("very");

            // using DOM

            var txt3=document.createElement("p");

            txt3.innerHTML="exciting";

            $("body").append(txt1,txt2,txt3);

        });

    });

    </script>

</body>

</html>

    });

    </script>

</body>

</html>

remove和empty方法是jQuery提供的删除元素的方法.

删除节点及其子树:

$(selector).remove()

清空节点的子树:

$(selector).empty();

事件

jQuery提供了基于回调机制的事件,上文的这个示例展示了如何为按钮点击事件编写响应:

<html>

<body>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <form>

        <label>username: <input id="username" type="text"/></label>

        <br><br>

        <label>password:<input id="password" type="password"/></label>

        <button id="btn">Click Me!</button>

    </form>

    <script type="text/javascript">

        $('#btn').click(function() {

            alert($('#username').val())

        });

    </script>

</body>

</html>

jQuery提供了常用的DOM事件:

鼠标事件
- 单击click()
- 双击dbclick()
- 移入mouseenter
- 移出mouseleave
键盘事件: 按键过程中依次触发
- 按下keydown()
- 已按下keypress()
- 松开keyup()
表单事件
- 提交submit()
- 改变change()
- 获得焦点focus()
文档窗口事件
- 文档就绪$(document).ready()
- 大小改变resize()
- 文本被选中select()

为了避免在文档加载完成前调用jQuery造成错误(比如试图获得未加载图片的大小), 通常将所有脚本写入$(document).ready()的回调函数.

Animation

封装效果

jQuery封装了常用动画效果:

隐藏hide()
显示show()
隐藏/显示切换toggle()
淡入fadeIn()
淡出fadeOut()
淡入/淡出切换fadeToggle()
渐变fadeTo(percent)
上滑slideUp()
下滑slideDown()
上滑/下滑切换slideToggle()

示例:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <div>

        <p>Hello World!</p>

        <button id="hide">Hide</button>

        <button id="show">Show</button>

        <button id="toggle">Toggle</button>

        <br><hr>

        <button id="fadein">Fade In</button>

        <button id="fadeout">Fade Out</button>

        <button id="fadetoggle">Fade Toggle</button>

        <br><hr>

        <button id="slideup">Slide Up</button>

        <button id="slidedown">Slide Down</button>

        <button id="slidetoggle">Slide Toggle</button>

    </div>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

    $(document).ready(function(){

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

            $("p").hide();

        });

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

            $("p").show();

        });

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

            $("p").toggle();

        });

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

            $("p").fadeIn();

        });

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

            $("p").fadeOut();

        });

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

            $("p").fadeToggle();

        });

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

            $("p").slideUp();

        });

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

            $("p").slideDown();

        });

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

            $("p").slideToggle();

        });

    });

    </script>

</body>

</html>

animate

jquery提供的animate方法可以定义更复杂的动画效果:

$(selector).animate({params},speed,callback);

speed参数指定动画速度,取值包括预定义值"slow","fast"或以毫秒为单位的持续时间, 为可选参数.

callback是动画结束时回调的函数,为可选参数.

params参数是包含动画参数的Object:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

</head>

<body>

    <div>

        <p id="p1">Hello World!</p>

        <button id="animate">animate</button>

    </div>

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

    </script>

    <script>

    $(document).ready(function(){

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

            $("#p1").animate({

                left:'250px',

                opacity:'0.5',

                height:'+=10px',

                fontSize: '+=1em'

            });

        });

    });

    </script>

</body>

</html>

params参数可以对除了颜色参数之外几乎所有CSS参数进行操作.

left:'250px'设定left属性动画结束时最终值为250px

height:'+=10px'设定height属性动画结束时比当前增加10px

Js的命名规则不支持CSS中font-size这样的标识符,需要将其改为驼峰命名fontSize.

若连续调用多次animate()方法,上一个动画完成后才会开始下一个动画,形成动画队列.

stop()方法可以停止动画的执行,包括animate和封装动画.

$(selector).stop(stopAll,goToEnd);

stopAll参数为true时停止动画队列中所有动画执行,为false时仅停止当前动画, 默认为false.

goToEnd参数为true时立即完成当前动画,为false时维持动画中断时的状态, 默认为false.

Utilities

JSON是js定义的一种轻量数据交换格式, jQuery.parseJSON(jsonStr);可以将json字符串转换为js对象.

jQuery没有集成json编码工具,可以使用jQuery json插件完成编码功能$.toJSON(obj).

使用该插件请在html中导入<script src="dist/jquery.json.min.js"></script>

jQuery插件包括校验器,自动补全,控件和动画效果等, 更多插件请参见plugins.jquery.com

邂逅jQuery的更多相关文章

thinkjs与Fine Uploader的邂逅
最近在做一个内部系统,需要一个无刷新的上传功能,找了许久,发现了一个好用的上传工具-Fine Uploader,网上也有不少关于它的介绍,对我有不少的启发,结合我的使用场景简单的介绍一下它与t ...
与TypeScript的一场美丽邂逅
TypeScript(一)前言:当你点开这篇文章时,我相信你已经在很多地方都已经听说过或者见过TypeScript了.但是可能对TypeScript依然有很多问号:TypeScript到底是什么?为什 ...
Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能由于jq中的ajax方法是用了内置的deferred模块,是P ...
利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

随机推荐

linux 查看、关闭 ssh pts/n登录的用户
1.查看登录用户: [root@TiaoBan- bin]# w :: up days, :, users, load average: 1.90, 1.75, 1.84 USER TTY FROM ...
cocos 2dx 通过循环实现界面图形的摆放
首先创建一个一维数组 this.starSprites = new Array(); 然后知道星星的间距和坐标后通过如下代码实现位置的摆放 for(var i = 0; i < 6; i++){ ...
LDO-AMS1117
AMS1117 1.是AMS艾默森公司简称.与AMS1117对应的IC有LM1117.AMS1117的最大输入电压为15V,而LM1117的极限是20V. 2.其输出电压有固定式(1.5V,1.8V, ...
MVC+Nhibernate+spring.net（一）
所用数据库是我之前所写的Nhibernate入门篇的数据库https://www.cnblogs.com/pandorabox/p/PandoraBox.html 第一步:创建一个mvc项目第二步: ...
Oracle11g手动创建数据库方法
Oracle11g手动创建数据库方法参考网页http://www.th7.cn/db/Oracle/201311/36926.shtml 安装路径我的安装路径是:E:\app\admin\prod ...
C#6.0语言规范(七) 表达式
表达式是运算符和操作数的序列.本章定义了操作数和运算符的语法,求值顺序以及表达式的含义. 表达式分类表达式分类为以下之一: 一个值.每个值都有一个关联的类型. 一个变量.每个变量都有一个关联的类型, ...
mysql数据库崩溃:InnoDB: Database page corruption on disk or a failed
修改mysql配置文件my.cnf,添加 innodb_force_recovery = 6 innodb_purge_thread = 0 重启mysql 这时只可以执行select,create, ...
Shell - 简明Shell入门06 - 循环语句（Loop）
示例脚本及注释 #!/bin/bash # for循环 for filename in t1 t2 t3 do touch $filename.txt echo "Create new fi ...
cStringIO 实现指定大小的字符串缓存
StringIO经常被用来作为字符串的缓存,以下实现无论写入多少字符串,总能返回一个指定大小的缓存 from cStringIO import StringIO class CustomStringI ...
odoo开发笔记：抛出警告的方式
上边rase 加3种写法,都能实现,跑出警告的功能.

邂逅jQuery

HTML

选择器

元素访问与操作

html()

text()

val()

attr()

添加/删除元素

事件

Animation

封装效果

animate

Utilities

邂逅jQuery的更多相关文章

随机推荐

热门专题