jQuery从无知到无所不知-阿里云开发者社区

开发者社区> 技术小甜> 正文

jQuery从无知到无所不知

简介:
+关注继续查看

1. JQuery概览

 

1.1. 概述

jQuery是一个JavaScript框架,它可以帮助用户使用很少的JavaScript代码,创建漂亮的页面效果。

1.2. jQuery的功能

  • 选择页面元素。

  • 动态更改页面样式。

  • 动态更改页面内容。

  • 控制相应事件。

  • 提供基本网页特效(淡入、擦除、移动等)。

  • 快速实现通信(很好的封装了ajax技术)。

  • 扩展JavaScript内核(如迭代、数组操作等)。

1.3. 对外接口单一

jQuery把所有操作都封装在一个jQuery函数中,形成唯一操作入口。

jQuery(expression,context)举例:

jQuery(“div#wrap>p:first”).addClass(“red”)。

jQuery(html)举例:

$(‘ul’).append($(‘<li>巴拉拉</li>’))。

jQuery(elements)举例:

  $(document).ready(function(){

    $(‘ul’).css(‘color’,’red’);

   });

jQuery(fn)举例(用于简化上例):

  $(function(){

    $(‘ul’).css(‘color’,’red’);

  })

1.4. 链式语法潇洒飘逸

代码示例,下例中,通过end()方法取消当前的jQuery对象,返回前面的jQuery对象。

 

1.5. 模仿css()选择器

模仿CSS选择器让选取元素更加精确、灵活。(css()方法)。

1.6. 扩展接口更开放

让jQuery更开放、富于活力。例如:下例利用jQuery扩展接口为jQuery框架定义两个自定义函数然后调用它们:

 

1.7. 注意点

a) jQuery框架本身就是在JavaScript语言基础上进行封装的,jQuery本质就是JavaScript代码,所以,JQuery与JavaScript代码可以相互混用。

b) jQuery对象是通过jQuery框架包装DOM对象之后产生的新对象,本质上它是一个普通的JavaScript对象,该对象包含了DOM对象的集合,因此,可以把DOM对象看作是一个独立的个体,而jQuery可以使多个DOM对象组成的数据集合。

c) jQuery对象和DOM对象是可以相互转换的,因为它们操作的对象都是DOM元素,只不过jQuery对象包含了多个DOM元素,而DOM对象本身就是一个DOM元素。举例:借助数组下标来读取jQuery对象集合中的某个DOM元素对象:,也可以借助jQuery对象方法(如get()方法)。

d) 使用$()函数可以直接把DOM对象转换成jQuery对象。

e) jQuery定义的ready与JavaScript定义的load事件都表示页面初始化行为,但有不同:

执行时机不同:


    1. load事件必须等到网页中所有内容全部加载后才执行。

    2. ready事件是在DOM结构绘制完毕后就执行(先于外部文件的加载)。

    3. 总之,ready事件先于load事件被激活,如果网页文档中没有加载外部文件,则二者响应时间接近。

用法不同


    1. JavaScript的load事件只能被编写一次。

    2. jQuery的ready事件可以在同一个文档中编写多个。

 

2. JQuery基础知识梳理

 

2.1. 基本选择器

基本选择器包括ID选择器(#id)、标签选择器(element)、类选择器(.class)、通配选择器(*)、组选择器(select1,select2..)等。

2.1.1. id选择器

  JavaScript:  document.getElementById(“id”);

  jQuery:  jQuery(“#id”)。

2.1.2. 标签选择器

  JavaScript:document.getElementsByTagName(“tagName”);

  jQuery:jQuery(“element”);

2.1.3. 类选择器

  (JavaScript没有原生的类选择器)

    jQuery(“.className”);

2.1.4. 通配选择器

  JavaScript:如:document.getElementsByTagName(“*”);

    jQuery如:$(“body *”),匹配<body>下面所有标签。

2.1.5. 组选择器(逗号隔开)

  如:$(“h2,#wrap,span.red,[title=’text’]”)

2.2. 层级选择器

层级选择器就是通过DOM嵌套关系结构来实现准确匹配,包括下面四种:

2.2.1. 包含关系

  $(“form input”),匹配表单下所有input元素。

2.2.2. 父子关系

  $(“form > input”),匹配表单下所有的子级input。

2.2.3. 相邻关系

  $(“label+input”),匹配所有跟在label后面的input元素。

2.2.4. 兄弟关系

  $(“form~input”),匹配所有与表单同级结构的input元素。

2.3. 伪类选择器

(在选择符中添加“:”标识符)。

a) $(“tr:first”),表格第一行。(对应;last)

b) $(“input:not(:checked)”),所有未选中的input元素。

c) $(“tr:even”),1,3,5行。(对应:odd)

d) $(“tr:eq(0)”)第1行表格行。

e) $(“tr:gt(0)”)第2行及后面行。(对应:lt)。

f) $(“div:contains(‘图片’)”),所有包含“图片”的div。

g) $(“div:has(p)”):所有包含p元素的div元素。

h) $(“p:visible”):所有可见的p元素。(对应;hidden)。

i) $(“p:first-child”)、$(“p:last-child等”)。

j) 与表单对象有关的伪类选择器


    1. :input,所有input、textarea、select、button元素。

    2. :text,所有单行文本框

    3. :password,所有密码框

    4. :radio,所有单选按钮。

    5. :checkbox,所有复选框。

    6. :submit,所有提交按钮。

    7. :image,所有图像域。

    8. :reset,所有重置按钮。

    9. :button,所有按钮。

k) 与表单属性相关的伪类选择器


    1. :enabled,所有可用

    2. :disabled,所有不可用

    3. :checked,所有被选中

    4. :selected,所有选中的option元素。

2.4. 属性选择器

一、 $(“div[id]”),查找所有含有id属性的div元素。

二、 $(“input[name=’text’]”)

三、 $(“input[name!=’text’]”)

四、 $(“input[name^=’text’]”)(属性值以text开始)。

五、 $(“input[name$=’text’]”)(属性值以text结束)。

六、 $(“input[name*=’text’]”)(属性值包含text)。

2.5. 过滤器

a) $(this).hasClass(“red”)

b) $(“div”).eq(1)

c) $(“div”).filter(“.red”)(过滤出包含red类的div)

2.5.1. 判断

if($(“div”).has(“p”))

2.5.2. 映射

例:通过map()方法把所有匹配的input元素的value属性值映射为一个新的集合,通过get()把集合中的数据转换为数组,再调用数组的join()方法把集合元素连接为字符串。

 

2.5.3. 清洗

$(“#menu li”).not(“.home”)(清除home类菜单项)。

2.5.4. 截取

$(“#menu li”)(截取第3,4个菜单项)。

2.5.5. 查找

children(),parents(),parent(),parentsUntil(),offsetParent(),prev(),

prevUntil(),next(),nextAll(),nextUntil(),siblings().

2.6. DOM操作

2.6.1. 创建元素。

  javascript:

  var div=document.createElement("div");

  document.body.appendChild(div);

jquery:

  var $div=$(“<div></div>”);

  $(“body”).append($div);

2.6.2. 输入文本

  javascript:

var div=document.createElement("div");

var txt=document.creatTextNode(“巴拉拉”);

jquery:

var $div=$(“<div>巴拉拉</div>”);

$(“body”).append($div);

2.6.3. 设置属性

javascript:  div.setAttribute(“title”,”盒子”);

jquery:  var $div=$(“<div title=’盒子’>巴拉拉</div>”).

2.6.4. 插入内容

append()、appendTo()、prepend()、prependTo()、after()、before()、

insertAfter()、insertBefore();

2.6.5. 删除内容

remove()、empty()、detach()

2.6.6. 克隆内容

(创建指定节点的副本):clone();

2.6.7. 替换内容:

replaceWith()、replaceAll();

2.6.8. 包裹内容:

wrap()、wrapAll()、wrapInner()、unwrap();

2.6.9. 属性操作:

attr()、attr(name,value)、removeAttr();

2.6.10. 类操作:

addClass()、removeClass()、toggleClass();

2.6.11. 读写文本和值;

html()、text()、val()

2.6.12. 读写css样式:

css();

2.7. 事件处理

jQuery事件模型体现如下特征:

1) 统一了事件处理中的各种方法;

2) 允许每个元素上为每个事件建立多个处理程序。

3) 采用2级事件模型中标准的事件类型名称。

4) 统一了Event对象的传递方法,并规范了Event对象的常用属性和方法。

5) 为事件管理和操作提供了统一的方法。

一、 注册事件

 

 

二、 快捷注册如:$(p).click(function(){alert();});其他快捷事件如下(这些方法与2级事件模型中的事件类型一一对应,名称完全相同)

 

三、 one()方法是bind()方法的特例,执行一次响应后就会失效。live()方法是bind方法的特例,后续添加的元素也会生效。

四、 注销事件:unbind();如:$(“p”).unbind(“mouseover”);

五、 事件触发:trigger(),如:$(“p”).trigger(“click”);

六、 事件切换:toggle();例:

 

七、 事件悬停:hover();例:

 

八、 事件委派:live();为p元素委派一个click事件,这样在后面动态生成的p元素也拥有click事件。但是如果使用bind()方法为当前p元素绑定click事件,则在后面动态生成的p元素就不会拥有这个click事件。live()一次只能绑定一个事件,而div可以绑定多个事件。

九、 自定义事件举例:

 

2.8. ajax应用

a) ajax是Asynchronous JavaScript and XML的缩写,即异步JavaScript和XML;

b) ajax的核心是JavaScript对象XMLHttpRequest

c) XMLHttpRequest能偶帮助用户使用JavaScript向服务器提出请求并处理响应,而不阻塞网页交互响应。

d) 使用XMLHttpRequest对象实现异步通信一般需要下面几个步骤:

  1. 定义XMLHttpRequest对象实例。

  2. 调用open()方法建立与服务器的连接。

  3. 注册onreadystatechange事件处理函数,以便接收和处理从服务器响应的信息。

  4. 调用send()方法发送请求。

e) jQuery的ajax举例:

 

 

g) XMLHttpRequest对象定义了responseText、responseBody、responseStrean和

responseXML属性,用来存储服务器端不同的响应格式:

 

h) XMLHttpRequest对象允许从服务器端响应任何形式的数据。但在实际应用中,大多数Web开发人员一般都将格式定位XML、HTML、JSON或者其他某种纯文本格式。

 

i) 在ajax异步通信 的过程中,客户端发送的请求字符串格式必须是由“&”字符连接的多个名值对,serialize()方法能够帮助用户按名值对的字符串格式快速整理,并返回合法的请求字符串:

 

j) 除了serialize()方法外,jQuery还定义了serializeArray()方法。该方法能够返回指定表单域的值的JSON结构的对象(是对象,而非字符串).















本文转自xsster51CTO博客,原文链接:http://blog.51cto.com/12945177/1929782 ,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6904 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4478 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7751 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9424 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
1129 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3227 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16815 0
+关注
6323
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载