jQuery

转载

mob604756f06ed8 2021-10-17 22:01:00

文章标签 html jquery 选择器 ajax css 文章分类 代码人生

jQuery

简称："JQ"

jQuery是一个快速、简洁的[JavaScript](https://baike.baidu.com/item/JavaScript/321142)框架(库，是继[Prototype](https://baike.baidu.com/item/Prototype/14335188)之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John Resig](https://baike.baidu.com/item/John Resig/6336344)发布)

jQuery设计的**宗旨**是“write Less，Do More”（写的少，干得多）

jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript[设计模式](https://baike.baidu.com/item/设计模式/1212549)，优化[HTML](https://baike.baidu.com/item/HTML/97049)文档操作、事件处理、动画设计和[Ajax](https://baike.baidu.com/item/Ajax/8425)交互

jQuery的核心特性可以总结为：具有**独特的链式语法**和短小清晰的多功能接口；具有高效灵活的[CSS选择器](https://baike.baidu.com/item/CSS选择器/2819686)，并且可对[CSS](https://baike.baidu.com/item/CSS/5457)选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如[IE](https://baike.baidu.com/item/IE/69103) 6.0+、FF 1.5+、[Safari](https://baike.baidu.com/item/Safari/597) 2.0+、Opera 9.0+等。

插件：是封装好的一个独立的功能代码，可供开发人员完成某个功能时直接使用的

库：是将很多功能代码封装到一起的，并不能帮助我们完成一整个项目

框架：可以帮助我们完成一整套的项目开发

# 一、jQuery起步

官网:http://www.jquery.com

手册：离线版(.chm或者PDF)

在线版:http://www.jq22.com

## 1.1 安装jquery

a. 下载jQuery库文件

从jq22.com网站上边下载

b. 导入jQuery库文件

```html

<script src="./jquery-3.5.1.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
```

## 1.2 入口函数

又称作预加载函数

```html
<script>
// 第一种写法
$(document).ready(function(){
// 在这里写你的代码...
});
// 第二种写法
$(function(){
// 在这里写你的代码...
})
</script>
```

JavaScript中获取html元素的方法

document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

jQuery中获取对象的方法

$()

## 1.3 jQuery获取DOM元素

$() 来获取对象(DOM元素)

**面试题**

js的dom对象和jQuery中的Dom对象如何互相转化

js dom对象转化为jquery dom对象：只需给js dom对象加上$()

jquery dom对象如何转化为js的dom对象： jq对象[下标]

# 二、选择器

选择器就是帮助我们来选取元素的，比如说在css中的选择器，选择好元素后进行样式的修饰，在Jquery中选择器选好元素后，是需要进行DOM操作的

大部分的css选择器都可以应用到jQuery选择器中

CSS的选择器分类

* 基础选择器
* *号选择器
* 标签(元素)选择器
* 类选择器 .类名
* id选择器 #id值
* 复合选择器
* 后代选择器 E F 查找的是E元素里边的F元素
* 子集选择器 E>F 查找的是E元素的子集F元素
* 紧邻兄弟选择器
* 同辈兄弟选择器
* 多重选择器
* 伪类选择器
* :hover
* :active
* :visited
* :link
* :first-child
* :last-child
* :nth-child()
* :not()
* :nth-of-type()
* 伪对象选择器
* ::before
* ::after
* ::first-line
* ::first-letter

# 三、样式

1. css() 为dom对象设置样式

**第一种用法**： css(属性名称,属性值) 一次只能设置一个样式

```html
<div class="demo">
设置一条样式
</div>
<script>
$('.demo').css('color','blue').css('background-color','red')
</script>
```

**第二种用法**：css({属性名称:属性值,属性名称:值....})

<div class="demo">
设置一条样式
</div>
<script>
// 写法一
var s = {
color:'blue',
backgroundColor:'cyan',
fontSize:'24px'
}
$('.demo').css(s)
// 写法二
$('.demo').css({
'color':'blue',
'background-color':'cyan',
'font-size':'24px'
})
</script>

# 四、DOM操作

1. append() 向匹配到的父元素末尾追加子元素

```html
<div class="add">append</div>
<script>
/*
1. 创建dom元素
jQ: $('<a href="http://www.baidu.com">百度</a>')
2. 获取父元素
$('.add')
3. 使用append()追加
父元素对象.append(要追加的子元素)
*/
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').append(obj)
</script>
```

2. appendTo() 把子元素追加到父元素中

```html
<div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>
```

3. prepend() 向父元素的开头添加子元素

```html
<div class="add">prepend</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').prepend(obj)
//结果： <div class="add"><a href="http://www.baidu.com">taobao</a>prepend</div>
</script>
```

4. prependTo() 元素前置到另一个、指定的元素元素集合中。

```html
<div class="parent">宝剑锋从磨砺出</div>
<span id="child">梅花香自苦寒来</span>
<script>
$(function(){
$('#child').prependTo($('.parent'))
// 效果：<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从磨砺出</div>
})
</script>
```

5. remove() 移出匹配到的元素

```html
<p>苹果01</p>
<p class="two">苹果02</p>
<p>苹果03</p>
<script>
//$('p').remove() // remove()方法不传递参数的情况下表示删除匹配到的所有元素
$('p').remove('.two') // 移除类名等于two的p标签
</script>
```

# 五、属性

1. attr() 获取或者设置属性

```html
<div class="demo" title="这是一个测试代码">attr方法 </div>
<script>
// attr() 获取匹配元素属性的值
var res = $('.demo').attr('title')
// attr() 设置匹配元素的属性值
$('.demo').attr('title','this is a test code') // 只修改一个属性值
$('.demo').attr({name:'code',id:'test'}) // 设置多个属性
</script>
```

2. removeAttr() 移除属性

```html
<div class="demo" title="这是一个测试代码" id='test'>attr方法 </div>
<script>
$('.demo').removeAttr('id')
</script>
```

注意：只接受一个参数

3. addClass() 添加类名

```html
<div id="demo"> 白日依山尽</div>
<script>
$(this).addClass('active')
</script>
```

4. removeClass() 移出类名的

```html
<div id="demo" class='active'> 白日依山尽</div>
<script>
$(this).removeClass('active')
</script>
```

5. toggleClass() 当某个类名存在时则删除，不存在时则添加

```html
<div id="demo"> 白日依山尽</div>
<script>
$('#demo').click(function(){
$(this).toggleClass('active')
</script>
```

6. html() 获取或者设置匹配元素的内容(包含标签)

```html
<div class="content"><span>作者:王之涣</span><br>白日依山尽</div>
<script>
$(function(){
// html() 获取元素的内容和JavaScript中的innerHTML相同的
var con = $('.content').html()
// console.log(con);
// html() 设置匹配元素的内容
$('.content').html('去<a href="http://jd.com" target="_blank">京东</a>网购')
})
</script>
```

7. text()

```html
<div class="content"><span>作者:王之涣</span><br>白日依山尽</div>
<script>
$(function(){
// text() 获取元素的文本内容不包含标签和JavaScript中innerText的相同的
var con = $('.content').text()
// console.log(con);
// text() 设置匹配元素的文本内容
$('.content').text('去<a href="http://jd.com" target="_blank">京东</a>网购')
})
</script>
```

**注意：**text()和html() 最大的区别，text()只处理文本内容，不能识别标签，而html() 方法可以识别标签

text()和html() 方法不能够用于获取或者设置表单标签的值，除了button和textarea这两个标签之外

8. val() 获取或者设置表单标签的值

```html
<input type="text" id="user" value="zhangsan">
<script>
$(function(){
// val() 获取表单标签的值
var res = $('#user').val()
// console.log(res);
// val() 设置匹配元素的value值
$('#user').val('张三')
})
</script>
```

9. prop() 设置或者获取元素的属性值
10. removeProp() 移出属性

**attr() 和prop()的应用场景**

prop()方法经常用于标签属性值有true和false的时候使用，例如：checked、seleted、readonly、disabled

# 六、事件

## 6.1 鼠标事件

语法：事件对象(dom元素).事件名称(function(){})

1. 鼠标单击事件 click()

```html
<style>

.clk{
width: 200px;
height: 180px;
background-color: red;
}
.active{
background-color: blue;
}

</style>

<div class="clk"></div>
<script>
$(function(){
$('.clk').click(function(){
$('.clk').toggleClass('active')
})
})

</script>
```

2. 鼠标移出事件 mouseout()
3. 鼠标滑过事件 mouseover()

## 6.2 表单事件

1. 聚焦事件(获得焦点事件) focus()

2. 失去焦点事件 blur()

3. 内容改变事件 change()

4. 表单提交事件 submit()

注意: 对象是form标签

## 6.3 键盘事件

1. 键盘按下事件 keydown()
2. 键盘弹起事件 keyup()
3. 键盘按压事件 keypress()

键盘码

## 6.4 jq中独有的事件方法

1. 事件绑定方法 bind()

2. 事件解绑方法 unbind()

3. 只触发一次事件方法 one()

4. on()

需要事件委托的元素的事件绑定一般都是动态创建的dom元素需要事件委托

# 七、动画效果

## 7.1 显示和隐藏

show() 显示

```html
<button>显示</button>
<button>隐藏</button>
<div class="show">显示</div>
<script>
$(function(){
// 单击显示按钮 div显现
$('button:eq(0)').click(function(){
$('.show').show(2000)
})
})
</script>
```

hide() 隐藏

```html
<button>显示</button>
<button>隐藏</button>
<div class="show">显示</div>
<script>
$(function(){
// 单击隐藏按钮 div消失
$('button:eq(1)').click(function(){
$('.show').hide(2000,function(){
$(this).show(1000)
})
})
})
</script>
```

## 7.2 上拉和下拉

slideUp() 上拉

slideDown() 下拉

slideToggle() 如果元素未显示下拉显示的就是上拉

```html
<button>上拉</button>
<button>下拉</button>
<button>toggle</button>
<div class="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").slideUp(2000)
})
$("button:eq(1)").click(function(){
$(".show").slideDown(2000)
})
$("button:eq(2)").click(function(){
$(".show").slideToggle(2000)
})
})
</script>
```

## 7.3 淡入和淡出

fadeIn() 淡入

fadeOut 淡出

fadeToggle()

```html
<button>淡入</button>
<button>淡出</button>
<button>toggle</button>
<div class="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").fadeIn(2000)
})
$("button:eq(1)").click(function(){
$(".show").fadeOut(2000)
})
$("button:eq(2)").click(function(){
$(".show").fadeToggle(2000)
})
})
</script>
```

## 8.4 自定义动画

animate()

```html
<style>
.show{
width: 240px;
height: 180px;
background-color: red;
}
</style>
<body>

<div class="show">div标签</div>
<script>
$(function(){
$(".show").animate({
"margin-top":'200px',
"margin-left":'300px'
},2000)
})
</script>
```