jQuery学习02

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

三、jQuery之——属性选择器

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

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

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

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

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

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

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

层次选择器:

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

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

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

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

过滤选择器:

基本筛选过滤器
内容筛选过滤器
可见性筛选过滤器
子元素筛选过滤器

$(“.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、创建元素节点    $()   下面举个实例。

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对象举例:

jQuery转DOM

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

DOM转jQuery

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

jQuery的ajax
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,877评论 0 44
  • 1:jQuery节点创建与属性的处理 创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个节点的结构...
    码农小杨阅读 3,788评论 0 1
  • jQuery模块 选择器、DOM操作、事件、AJAX与动画 匿名函数自执行 作用:解决命名空间与变量污染的问题 总...
    青青玉立阅读 4,451评论 0 0
  • DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作。但实际上...
    阿r阿r阅读 4,633评论 0 9
  • (续jQuery基础(1)) 第5章 DOM节点的复制与替换 (1)DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 5,274评论 0 8

友情链接更多精彩内容