jQuery学习02-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

jQuery学习02

简介: 此篇是续上一篇的jQuery01之后的继续学习。 三、jQuery之——属性选择器 jQuery除了支持css的所有选择器,还支持一些独有的选择器。有基本选择器、层次选择器、过滤选择器、等等 基本选择器:$(“#id”)根据id来匹配元素 $(.class)根据给定的类名匹配元素 $(“element”)根据给定的元素名匹配元素 $(“*”)匹配所有元素 $(“selector1,selector2”)根据每个选择器匹配的元素合并并返回 下面举个例子,图左边为jQuery控制代码,图右为运行效果。

此篇是续上一篇的jQuery01之后的继续学习。

三、jQuery之——属性选择器

jQuery除了支持css的所有选择器,还支持一些独有的选择器。有基本选择器、层次选择器、过滤选择器、等等

基本选择器:$(“#id”)根据id来匹配元素

$(.class)根据给定的类名匹配元素

$(“element”)根据给定的元素名匹配元素

$(“*”)匹配所有元素

$(“selector1,selector2”)根据每个选择器匹配的元素合并并返回

下面举个例子,图左边为jQuery控制代码,图右为运行效果。

img_b362d643a317910c599405ca1717fe26.png

层次选择器:

img_97af39be9f68e716a1a1cf2211ccb0aa.png

后代选择器:$(“ul li”)选择ul元素中所有li元素

子选择器:$("ul>li")选择<ul>元素中所有的直接<li>子元素

相邻兄弟选择器:$("h1+p")选择<h1>元素后面紧跟的<p>兄弟元素

一般兄弟选择器:$(“h1~p”)选择<h1>元素后面的所有兄弟元素,并过滤掉<p>元素

过滤选择器:

img_16ac211fd54c7a008956792a07c7a88b.png
基本筛选过滤器
img_f3e05b6cc89f189ceb6f155d0b708a90.png
内容筛选过滤器
img_c0e53858f328d3536a85dd42c1095f2d.png
可见性筛选过滤器
img_02908beb81afcfdf8e408153a595b71b.png
子元素筛选过滤器

$(“.xdk:first”)选取所有class值为“xdk”中的第一个元素

$(document).ready(function(){...}) 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续function内的代码

$(“.xdk:last”)选取所有class值为“xdk”中的最后一个元素

$("li:eq(1)")在所有<li>元素中,选取其索引值为1的元素,索引值从0开始

$(“:header”)选取整个网页中所有的<h1>,<h2>等标题元素

$(“div:animated”)选取正在执行动画的<div>元素

$("div:contains('mylove')")选取含有文本“mylove”的<div>元素

$(“div:empty”)选取不包含子元素或文本元素的<div>元素

$(“div:parent”)选取含有子元素或文本元素的<div>元素

表单选择器:$(“#form:input”)选取id值为form的元素下的所有<input>、<textarea>,<selcet>,<button>元素

$(":text")选取所有的单行文本框

$(“:checkbox”)选取所有的复选框

......类似推下去

四、jQuery之——操作DOM

1、获取id值为“id”的元素节点   var selector = $("#id");

2、创建元素节点    $()   下面举个实例。

img_3d3ddbd87d4510bd12cfb7f1428a2059.png

3、删除元素节点    remove()移除某行;    empty()全部清空

4、插入元素节点   append()    appendTo(content)添加到匹配的content元素节点中

元素的样式操作:

1、addClass()方法——为每个匹配的元素添加指定的类名

2、removeClass()方法——从所有匹配的元素中删除全部或者指定的类

3、toggleClass()方法——如果存在(不存在)就删除(就添加)一个类

文本节点的操作:

1、html()方法是重置HTML内容,而append()方法是追加HTML内容

2、执行text()方法是获取匹配元素的文本内容

3、val()方法是获取或设置表单元素的值

遍历元素节点:

1、find()找到所有和指定表达式匹配的元素     如$(“div”)find("i")   找到div标签中的i元素

2、next()取得一个包含匹配的元素集合中每个元素紧邻的后一个同辈元素的元素集合     如$(“p”).next() 取到和p元素同级的下一个元素 

3、sibilings()取得一个包含匹配的元素集合中每个元素的所有唯一同级元素的元素集合

4、parent()取得一个包含匹配所有元素的唯一父元素的元素集合    如$(“i”).praent()    取到所有i元素的上级元素的集合

5、prev()取得一个包含匹配的元素集合中每个元素紧邻的前一个同级元素的元素集合


注意:jQuery对象和DOM对象不是同一个对象,jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。当使用jQuery对象时,需要用到DOM对象的某个方法而jQuery对象没有提供对应封装的方法,就必须进行转换。

jQuery对象转换为DOM对象举例:

img_e2bacf7a8a83ea71110afcfac307f277.png
jQuery转DOM

DOM对象转换为jQuery对象举例:

img_eab04836ad0cfdf3904eca398258b002.png
DOM转jQuery

jQuery把ajax封装的极为简洁,不需要兼容,不需要重复代码,基于配置实现ajax技术,jQuery的ajax使用举例:

img_5ce446ad4a9dab29f15d8bd32284c9ae.png
jQuery的ajax

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

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章