jQuery 入门指南教程

2020-03-09 13:34:28 浏览数 (1)

jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。

基础语法

代码语言:javascript复制
$(selector).action()
  • 美元符号定义 jQuery
  • 选择符(selector)“查询”和“查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

示例:

代码语言:javascript复制
$(this).hide() - 隐藏当前元素
$('p').hide() - 隐藏所有段落
$('p.test').hide() - 隐藏所有 class="test" 的段落
$('#test').hide() - 隐藏所有 id="test" 的元素

通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jQuery对象(集合对象),不能直接调用dom定义的方法。

jQuery的基本设计和主要用法,就是”选择某个网页元素,然后对其进行某种操作”。这是它区别于其他函数库的根本特点。使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

CSS 选择器

代码语言:javascript复制
$(document) // 选择整个文档对象
$('#myId') // 选择ID为myId的页面元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素

jQuery 特有表达式

代码语言:javascript复制
$('a:first') // 选择页面中第一个a元素
$('tr:odd') // 选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

dom对象和jQuery对象区别

只有jQuery对象才能使用jQuery定义的方法。注意dom对象和jQuery对象是有区别的,调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。如:$(document.getElementById(”msg”))则为jQuery对象,可以使用jQuery的方法。

对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jQuery对象,而get(n)和索引返回的是dom元素对象。对于jQuery对象只能使用jQuery的方法,而dom对象只能使用dom的方法,如要获取第三个<div>元素的内容。有如下两种方法:

代码语言:javascript复制
$('div').eq(2).html(); // 调用 jQuery 对象的方法
$('div').get(2).innerHTML; // 调用 dom 的方法属性

jQuery 常用操作

代码语言:javascript复制
// html 内容
$('#msg').html(); // 返回 id 为 msg 的元素节点的html内容
$('#msg').html('<b>content</b>'); // 将"<b>content</b>"作为html串写入id为msg的元素节点内容中,页面显示粗体的content

// 文本内容
$('#msg').text(); // 返回 id 为 msg 的元素节点的文本内容
$('#msg').text('<b>content</b>'); // 将"<b>content</b>"作为普通文本串写入id为msg 的元素节点内容中,页面显示<b>content</b>

// 高宽度
$('#msg').height(); // 返回 id 为 msg 的元素的高度
$('#msg').height('300'); // 将 id 为 msg 的元素的高度设为 300

// value 值
$('input').val(); // 返回表单输入框的value值
$('input').val('test'); // 将表单输入框的value值设为test

// 单击事件
$('#msg').click(); // 触发 id 为 msg 的元素的单击事件
$('#msg').click(fn); // 为 id 为 msg 的元素的单击事件添加函数

如果选中多个元素,jQuery提供过滤器,可以缩小结果集:

代码语言:javascript复制
$('div').has('p'); // 选择包含 p 元素的 div 元素
$('div').not('.myClass'); // 选择 class 不等于 myClass 的 div 元素
$('div').filter('.myClass'); // 选择 class 等于 myClass 的 div 元素
$('div').first(); // 选择第一个 div 元素
$('div').eq(5); // 选择第六个 div 元素

有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:

代码语言:javascript复制
$('div').next('p'); // 选择 div 元素后面的第一个 p 元素
$('div').parent(); // 选择 div 元素的父元素
$('div').closest('form'); // 选择离 div 最近的那个 form 父元素
$('div').children(); // 选择 div 的所有子元素
$('div').siblings(); // 选择 div 的同级元素

对 css 操作

代码语言:javascript复制
$('#msg').css('background'); // 返回元素的背景颜色
$('#msg').css('background', "#CCC"); // 设置元素的背景颜色为灰色
$('#msg').height('300'); // 设置元素的高度为 300
$('#msg').width('200'); // 设置元素的宽度为 200
$('#msg').css({ color: 'red', background: 'blue'}); // 以键值对的形式设定样式
$('#msg').addClass('myClass'); // 为元素添加名称为 myClass 的 class
$('#msg').removeClass('myClass'); // 删除元素名称为 myClass 的 class
$('#msg').toggleClass('myClass'); // 如果存在(不存在)就删除(添加)名称为 myClass 的 class

选中网页元素以后,就可以对它进行某种操作。所谓连写,即可以对一个jQuery对象连续调用各种不同的方法。 jQuery允许将所有操作连接在一起,以链条的形式写出来,比如:

代码语言:javascript复制
$('div').find('h3').eq(2).html('Hello');

分解开来,就是下面这样:

代码语言:javascript复制
$('div') // 找到 div 元素
	.find('h3') // 选择其中的 h3 元素
	.eq(2) // 选择第三个 h3 元素
	.html('Hello'); // 将它的内容改为 Hello

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。 jQuery还提供了.end()方法,使得结果集可以后退一步:

代码语言:javascript复制
$('div') // 找到 div 元素
	.find('h3') // 选择其中的 h3 元素
	.eq(2) // 选择第三个 h3 元素
	.html('Hello') // 将它的内容改为 Hello
	.end() // 退回到选中的所有的 h3 元素的那一步
	.eq(0) // 选中第一个 h3 元素
	.html('World'); // 将它的内容改为 World

jQuery 常用工具方法

除了对选中的元素进行操作以外,jQuery还提供一些工具方法(utility),不必选中元素,就可以直接使用。 如果你懂得Javascript语言的继承原理,那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用。如果不理解这种区别,问题也不大,只要把工具方法理解成,是像javascript原生函数那样,可以直接使用的方法就行了。

常用的工具方法有以下几种:

代码语言:javascript复制
$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象,合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。

0 人点赞