JQuery常用选择器

水深无声 2021-09-28 06:16 284阅读 0赞

### 什么是JQuery ###

> Jquery就是JS的封装并做了简化处理。

### JQuery的优势 ###

>  *  轻量级的js库
>  *  强大的选择器
>  *  支持DOM操作
>  *  支持链式操作 $("\#p").css(“color”,“red”).click(function()\{…\})
>  *  开源的
>  *  完善的ajax操作

### 选择器 ###

#### 1.基本选择器 ####

<p id="p1" class="p2">ppp</p>
    标签选择器: $("p")
    id选择器:$("#p")
    class选择器:$(".p2")
    通配符选择器:$("*")

#### 2.后代(层次)选择器 ####

> 直接子元素 			childen()
    空格	 所有子元素
    + 下一个同辈元素		next()
    ~ 后面所有的兄弟元素	nextAll()
    sibling() 所有的同辈元素
    上一个元素			prev()
    
    常用的方法:
    	find()	查找元素
    	eq()	查找指定元素
    	first()/last()	第一/最后一个元素
    	childen()	直接子元素
    	parent()	直接父元素
    	parents()

#### 3.过滤选择器 ####

:first/last
    :even	偶数
    :odd	奇数
    :hidden
    :eq
    属性过滤选择器: $(form input[name='name'])

#### 4.表单选择器 ####

test
    password
    checkbox
    radio
    submit
    button
    reset
    select
    ...

#### 5.元素选择方法 ####

1. 获取设置文本	text()	dom:innerText
    2. 获取设置html	html()	dom:innerHtml
    3. val()

### JQueryDOM ###

1. 查找节点	attr()	prop()
    2. 创建节点	元素节点 文本节点 属性节点
    	$li = $("<li title="xx">ppp</li>");
    	$li.attr("title", "xxx");
    3. 插入节点
    	append()	appendTo()	prepend()	prependTo()
    	after()	insertAfter()	before()	insertBefore()
    4. 删除节点
    	remove()	empty()清空节点 仅仅清空内容
    5. 修改节点
    	复制节点	clone(true/false)
    	修改节点 replaceWith()	replaceAll()
    6. 删除属性	removeAttr()
    7. css操作	$("p").css("color","red");
    8. 样式操作	addClass("color","red") removeClass() hasClass()

### Jquery事件和动画 ###

1. DOM加载事件	$(function(){ ..})
    2. 事件绑定	bind()	unbind()
    3. 合成事件	hover()	toggle():控制隐藏或显示
    4. 动画	hide()	show()	可以加参数