JQuery中查找父元素,子元素,追加元素,插入元素和删除元素

Jquery之所以强大,和其在获取对象时使用与css选择器兼容的语法有很大关系。而且它还兼容了CSS3的选择器,而且多出了不少。

所以jQuery的选择器也就变得很多很强大。就最基本的有以下四个:

$(‘*‘)  匹配页面所有元素

$(‘#id‘) id选择器

$(‘.class‘) 类选择器

$(‘element‘) 标签选择器

$(‘E[attr]‘) 含有属性attr的元素E

$(‘E[attr=value]‘) 属性attr=value的元素E

JQuery中查找父元素

.closest()

closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果一直没有找到匹配元素,则返回一个空的jQuery对象

<ul class="ulCss">
<li class="itemA">A</li>
<li class="itemB">B</li>
</ul>

<script>
$(‘li.itemA‘).closest(‘ul‘).css(‘background-color‘,‘red‘);
</script>

在这里,$(‘li.itemA‘).closest(‘ul‘) 获取的就是 <ul class="ulCss"> 这个元素

.parent()

parent() 向上只查找一层,即返回唯一的父元素。 如果选择器选择了多个对象(比如 $("div").parent(), 这里选择器$("div")会返回页面上所有的div,如果页面上有多个div,则就是说,这个选择器$(‘div‘)就是选择了多个对象),则返回父元素数组.

比如: $("div").parent() 返回页面上所有div元素的父元素,结果是一个数组。如果需要在这个数组里面继续选择,可以使用$("div").parent("#id"), $("div").parent(".className")

.parents()

parents()方法就不是往上只查找一层,而是会一层一层的往上查找,直到返回所有匹配上的元素.  也就是说,它会查找jQuery对象符合选择器的所有祖先元素,但不包括元素本身.

$("p.selected").parents("div").css("border","2px red solid")  会查找css class为selected的p元素 的 所有祖宗div元素,然后给这些div元素添加border属性"2px red solid"

所以 parents()和closest()的区别

1. parents()从父级开始匹配元素,而closest()从自身开始

2. parents()向上查找所有的父级元素,直到根元素。然后把这些所有的查找结果放到一个临时的集合中,再通过额定的条件来进行筛选.

closest()从自身元素开始向上查找,直到找到有效的匹配元素就停止.

3. parents()返回的元素值可以有0个,1个,或者多个. 而closest()结果返回值就只有0个或者1个

JQuery中查找子元素

.children()

.children()方法和.parent()方法 (注意 不是parents()) 相对应

children在英文中是孩子的意思,所以它只向下追索一层.

children()方法返回被选元素的所有直接子元素,该方法只会向下一级对DOM树进行遍历.

比如 $("div").children() 会返回页面上每个div的所有直接子元素.

.find()

find()方法用来查找指定元素的后代元素,一路向下直到最后一个后代  注意: find()用来查找当前元素的所有后代元素

$(‘ul‘).find(‘li‘).css(‘background-color‘,‘red‘) 首先找到页面上所有的ul元素,然后找到ul元素下面的所有后代li元素,给他们加上背景颜色-红色

又比如 $("#table1").find("td") 和 $("#table1 td")效果是一样的。

$("div").find("*") 返回<div>的所有后代元素.

JQuery中的基本方法

.ready(handler) 

文档加载完成后执行的方法,区别于window.onload

时间: 2024-07-30 10:17:13

JQuery中查找父元素,子元素,追加元素,插入元素和删除元素的相关文章

Java中数组的几个常用算法:插入算法,删除算法,冒泡排序算法

前言: 在Java中我们常常会用数组,提到数组就不得不介绍数组中常用到的几个算法. 有插入算法,删除算法,冒泡排序算法等. 在学习这几个数组的算法前,我们先来了解一下关于数组一些基本知识. 数组的基本知识: 数组的定义:数组(Array)是相同数据类型的数据的有序集合. 数组是引用数据类型. 数组的三个特点: [1]数组长度是确定.数组一旦申请完空间,长度不能发生变化,用length属性访问. [2]数组的元素都是同一数据类型. [3]数组是有序的 .每个元素通过下标/索引标记,索引从0开始.

jQuery中获取特定顺序子元素(子元素种类不定)的方法

提出问题:只已知父元素和父元素中子元素的次序,怎么通过jQuery方法获得该元素? 1 <p>第一部分:</p> 2 <ul> 3 <li>1</li> 4 <li>2</li> // 选择这个子元素 5 <li>3</li> 6 </ul> 7 <p>第二部分:</p> 8 <ul> 9 <li>4</li> 10 <l

jquery 获取当前父级 子级元素

jQuery.parent(expr)  找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parent().parent() 如此接起来也行 jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr).返回所有子节点,这个方法只会返回直

jQuery中查找带有某一属性的元素

全局查找: $('*[name="username"]'):在前面加个*表示查找所有带有 name="username" 的DOM: $('*[name]'):代表全局查找带有name属性的DOM,其实可以更简单的用$('[name]')就可以了: eg:$('[data-id]'); $($('*[data-id]')[1]).html = $($('*[data-id]')[1]).attr('data-id'). 原文地址:https://www.cnblog

jquery中对父节点和子节点的利用

<tr id='new_tr'> <td id="td_1">td1</td> <td id="td_2">td2</td> <td id="td_3">td3</td> <td><button class="update_data" onclick="update_function(this)">修

sql server中的大数据的批量操作(批量插入,批量删除)

首先我们建立一个测试用员工表 ---创建一个测试的员工表--- create table Employee( EmployeeNo int primary key, --员工编号 EmployeeName nvarchar(50) null, --员工名称 CreateUser nvarchar(50) null, --创建人 CreateDate datetime null, --创建时间 ) 执行后结果: 那么假如我们要批量插入10000条数据,应该怎么办? 这里有四种方法(普通循环,事务循

jquery查找父元素、子元素(个人经验总结)

使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt

JQuery操作iframe父页面与子页面的元素与方法

JQuery操作iframe父页面与子页面的元素与方法 更新: 2011-05-05 来源: 互联网 字体:[大 中 小] - JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在ifr

js如何判断是否在iframe中/JQuery调用iframe父页面元素与方法

//方式一 if (self.frameElement && self.frameElement.tagName == "IFRAME") { alert('在iframe中'); } //方式二 if (window.frames.length != parent.frames.length) { alert('在iframe中'); } //方式三 if (self != top) { alert('在iframe中'); } 第一.在iframe中查找父页面元素的