jQuery笔记（一）jQuery简介及选择器的使用

た入场券 2022-04-14 07:11 347阅读 0赞

1、JAVASCRIPT类库，简称为JS库

作用 - 为了简化javascript的开发

目的 - 预定义了很多对象(属性和方法)和函数

特点 - 兼容各大浏览器

2、JQUERY

概述： jQuery其实就是一个JS文件

分类

jQuery - Web版本(最主要)

jQuery UI(User Interface) - 集成UI内容

jQuery Mobile - 移动版本(WebApp)

QUnit - 用于测试

使用jQuery的三个步骤

①在HTML页面中引入jQuery文件

②使用jQuery的选择器定位(获取)页面元素

③利用jQuery的API方法完成需求

3、$(selector) - jQuery的工厂函数，该函数返回jQuery对象

jQuery的约定 - jQuery对象前增加"$"符号

// DOM对象

var username = document.getElementById("username");

// jQuery对象

var $username = $("\#id");

4、DOM对象与jQuery对象

DOM对象 - 通过DOM获取的元素,称之为DOM对象

jQuery对象 - 通过jQuery包装DOM后产生的对象

jQuery对象的底层还是DOM对象

DOM对象与jQuery对象的转换

DOM对象转换为jQuery对象：$(DOM对象)

jQuery对象转换为DOM对象：jQuery对象是数组对象

①$jQuery对象\[角标\]      ②$jQuery对象.get(角标)

jQuery对象提供get(index)方法

注意 - DOM对象与jQuery对象之间不能相互调用

例：获得DOM对象

var username = document.getElementById("username"); console.log(username.value);

DOM对象转换成jQuery对象

var $username = $(username); console.log($username.val());

获得jQuery对象

var $username = $("\#username");   console.log($username.val());

jQuery对象转换成DOM对象（jQuery对象是数组对象）

var username1 = $username\[0\];   console.log(username1.value);

jQuery对象提供get(index)方法

var username2 = $username.get(0); console.log(username2.value);

5、jQuery程序语句基本语法

$(选择器字符串)  .   method   (参数行);

选择器          动作(API)   参数

4、选择器  jQuery的根基

①基本选择器

$("div")标签属性

$("\#btn")  id 属性：

$(".item")class属性：

$("\*")全部选择器：

$("\#d1,.mini")多个选择器并列使用：

$(".d1.mini")需要同时具有.d1类和.mini类

②层级选择器

$("body div")祖先与后代

$("body>div")父元素与子元素

$("\#one+div")选择id为one后的第一个兄弟元素，且必须为div

$("\#one~div")选择id为one后面所有div元素

③基本过滤选择器(过滤选择器在选择器前,具有":"符号)

$("div:first")获取div元素中的第一个

$("div:last")获取div元素中的最后一个

$("div:even")获取索引值为偶数的div元素，索引值从0开始！！

$("div:odd")获取索引值为奇数的div元素

$("div:gt(1)")获取索引值大于1的div元素 great than

$("div:lt(1)")获取索引值小于1的div元素 less than

$("div:eq(1)") 获取索引值等于1的div元素 less than

$("div:not('.mini')")获取class不为mini的div元素(包含没有class属性的div元素)

$(":header")获取所有标题元素(h1 - h6) - 不常用

$(":animated")获取当前正在执行动画的元素

④子元素过滤选择器

$("div:nth-child(2)")获取div元素的子元素是第二个

$("div:first-child")获取div元素的第一个子元素

$("div:last-child")获取div元素的最后一个子元素

$("div:only-child")如果哪个div元素只有一个子元素,那么选中

⑤内容过滤选择器

$("div:contains('div11')")文本包含"div11"的div元素

$("div:empty")不包含任何文本内容或子元素的div元素

$("div:parent")包含任何文本内容或子元素的div元素

$("div:has('.mini')") 包含class为mini的div元素的父div元素

⑥可见性过滤选择器

$("div:visible")可见的div元素

$("div:hidden")不可见的div元素

⑦属性过滤选择器

$("div\[title\]")包含属性title的div元素

$("div\[title=text1\]")包含属性title=text1的div元素

$("div\[title!=text1\]")包含属性title!=text1的div元素(包含没有该属性的div元素)

$("div\[title^=text\]")包含属性title值是以text开始的div元素

$("div\[title$=t1\]")// 包含属性title值是以t1结束的div元素

$("div\[title\*=t1\]")包含属性title值包含t1的div元素

$("div\[title$=t1\]\[id\]")多个属性过滤选择器并列使用包含属性title值是以t1结束的,包含id属性的div元素

⑧表单对象属性过滤选择器

$("input:enabled") 改变页面中可用元素的value属性值

$("input:disabled")改变页面中不可用元素的value属性值

$("input\[name=love\]:checked")被选中的单选框

⑤选择器的建议

不用记 - 会查jQuery的帮助文档即可

多练 - 9个页面

jQuery笔记（一）jQuery简介及选择器的使用

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 jQuery选择器、jQuery关系选择器、jQuery伪选择器

相关 jQuery选择器及jQuery基本操作

相关 jQuery笔记：选择器

相关 jQuery选择器使用

相关 jQuery 选择器的使用

相关 jQuery学习笔记（一）使用jQuery选择器（荐）

相关 jQuery学习笔记2之jQuery选择器

相关 jQuery-jQuery选择器

相关 jQuery笔记（一）jQuery简介及选择器的使用

相关 jquery选择器--学习笔记