2021-10-27 JavaScript学习笔记（二）_在jquery中,获取除给定选择器之外的所有元素使用()-CSDN博客

本文链接：https://blog.csdn.net/qq_45574769/article/details/120985759

本文详细介绍了DOM的基础知识，包括document对象的常用属性和方法，如getElementById、getElementsByTagName等，以及如何改变HTML元素内容和样式。同时，探讨了DOM节点的操作，如创建、添加和删除节点。接着，文章转向jQuery基础，讲解了jQuery的基本语法、常用方法，如toggleClass、next、css等，并介绍了选择器的使用，包括基本选择器、过滤选择器和内容选择器，以及如何处理页面事件和与AJAX的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. DOM基础知识

document对象包含所有的html元素，将元素当作节点

2.常用属性：

bgColor : 设置背景颜色
fgColor : 设置前景色
tetle : 设置标题

3.document对象查找HTML元素

getElementById : 获取指定id的HTML元素对象
gerElementByTagName ：返回所有指定标签名的HTML对象
getElementByName ：获取一组指定name的HTML对象
getElementByClassName ：返回所有指定类名的对象

例如：

 var a =   document.getElementById("id名称")；

需要注意的是，类似于使用类名查找返回的对象是一个集合

4.document对象改变HTML

修改HTML元素内容

// 获取对象
var k = document.getElementById("as")
as.innerHTML = 新的HTML内容

改变HTML样式

// 获取对象
var k = document.getElementById("as")
//获取对象的style中的style样式，然后改变样式
k.style.样式 = 新的样式

5.DOM节点操作

常用属性：

parentNode ：当前节点的父节点引用
childNode ：当前节点的所有字节带你
firstChild ：当前节点的第一个子节点
lastChile ：当前节点的最后一个子节点
previousSibling ：当前节点的前一个兄弟节点
nextSibling ：当前节点的后一个兄弟节点

动态添加和删除节点：
createElement : 创建节点
appendChild() : 添加节点
removeChild() : 删除节点

例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" onclick="del()" value="删除" />
		<script type="text/javascript">
			var divs = document.createElement("div"); //创建一个div节点
			//歌节点添加类名
			divs.className = "li";
			//添加节点
			document.body.appendChild(divs);
			
			// 通过获取相应的类名设置参数，用于明显的查看是否创建成功
			var l = document.getElementsByClassName("li");
			l[0].style.width = "200px";
			l[0].style.height = "200px";
			l[0].style.backgroundColor = "red";
			function del(){
				document.body.removeChild(l[0]);
			}
		</script>
	</body>
</html>

二. jQuery基础知识

1.初步认识一下jQuery，他是JavaScript的一个简单但是效果强大的框架，它需要下载相应的jQuery文件使用JavaScript进行导入，它有一些基本功能

访问和操作DOM元素
对页面事件的处理
大量插件在页面中的运用
于AJAX技术的完美结合
jQuery下载链接：https://pan.baidu.com/s/13CTfWx3cFqRzfHyKD2wQOQ
提取码：2022

2.基础语法：

$(document).ready(function(){编写程序的位置})
//当然可以简写成：
$(function(){编写程序的位置})

3.常用方法：

toggleClass() ：检查元素中指定的类，不存在则添加，存在则删除
next() ：获取元素其后紧邻的同辈元素
toggle() ：切换隐藏状态
css("css对象“，设置的值) ：设置css的值，当不需要设置值时，获取它的值
val() ：获取它的值
attr(a,b) : attr() 方法设置或返回被选元素的属性和值

4.基本选择器

语法：$(selector).action()
注： selector表示选择的文件可以是id选择器或者类选择器，action说的时处理方法
例：

$("#bth").click(function(){文件处理的位置}))

5.过滤选择器

语法：在基本选择器后面加上：号，后面在添上筛选条件
常用筛选：

first()或:first ：获取第一个元素
last()或:last ：获取最后一个元素
:not(selector) ：获取除给定选择器之外的所有元素
:ecen ：获取索引为偶数的
:odd ：获取索引为奇数的
:eq(index) ：获取索引值等于index的
:gt : 大于
:lt : 小于
:header ：获取所有标题元素
:animated ：获取正在执行动画的元素

$("#bth").click(function(){
      $(":header")
      }))

6.内容选择器

：contains(text) ：获取含有文本text的元素
： empty ：获取不包含后代元素与文本的空元素
： has(selector) ：获取含有后代元素selector的元素
： parent() ：获取含有后代元素或文本的非空元素

7.可见性过滤选择器

：hidden 选取不可见元素
：visible 选取可见元素