jQuery简介

Posted 2020-11-30 jicc-j

我们在学习了js语言之后我们发现js语言虽然能够实现我们的大部分功能，但是并不整洁。于是我们有了另一种更加完善的语言jQuery。
jQuery内部封装了原生的js代码将其更简便的表示出来，同时也有自己的一些方法。类似于python中的模块，而我们更愿意称他为类库。同时它兼容多个浏览器，使你一般不需要考虑兼容性问题。

jQuery宗旨：write less do more 写的更少，做的更多

就像我们对他的定义作为模块我们需要进行提前的导入，而如果你的条件允许（你有网络）你就可以利用cdn来完成网络的传输，因为压缩过后的jQuery大小只有几十k所以网络传输的速度还是比较快的。当然你也可以下载到本地来使用，但是那样会存在一些这样又那样的问题，所以这里还是推荐大家使用cdn方式

因为jQuery是由源码js发展来的，所以我们就来对比着js来学习

基本语法：
在python中我们实现对象的转换类型是就是用list（）将目标对象转换为列表对象，而jQuery也是相同的操作
jQuery（选择器）生成一个jQuery对象，而秉持着少些多做的原则，我们可以将其简写为$()的形式。

基本选择器：
id选择器：$("#id")
class选择器：$(".class")
属性选择器：$("属性")
jQuery选择器转标签选择器：$("#id")[0]

组合选择器：
$(‘#d1,.c1,p‘) 并列+混用
$(‘div span‘) 后代
$(‘div>span‘) 儿子
$(‘div+span‘) 毗邻
$(‘div~span‘) 弟弟

基本筛选器：
$(‘ul li:first‘) 大儿子
$(‘ul li:last‘) 小儿子
$(‘ul li:eq(2)‘) 放索引
$(‘ul li:even‘) 偶数索引 0包含在内
$(‘ul li:odd‘) 奇数索引
$(‘ul li:gt(2)‘) 大于索引
$(‘ul li:lt(2)‘) 小于索引
$(‘ul li:not("#d1")‘) 移除满足条件的标签
$(‘div:has("p")‘) 选取出包含一个或多个标签在内的标签

属性筛选：
$(‘[username]‘) 与js类似起手就是中括号
表单筛选：
$(":属性或者type")
特殊情况：
$(‘:checked‘) 它会将checked和selected都拿到
$(‘:selected‘) 它不会 只拿selected

筛选器方法：
$(‘#id‘).next() 同级别下一个
$(‘#id‘).nextAll() 同级别下面所有
$(‘#id‘).nextUntil() 同级别下直到某一位置，不包括最后一个
$(‘#id‘).prev() 同级别上一个
$(‘#id‘).prevAll() 同级别上面所有
$(‘#id‘).prevUntil() 同级别上直到某一位置，不包括最后一个
$(‘#d2‘).children() 儿子
$(‘#d2‘).siblings() 同级别上下所有

因为我们通过$()得到的是一个对象，所以当我们将$("id").parent（）(获取父标签)看作是一个整个的对象的时候，他也有一系列方法
例如我们搜索父标签的父标签就可以使用：$("id").parent（）.parent（）方法，由此我们可以推断
$(‘div p‘)=$(‘div‘).find(‘p‘) find从某个区域内筛选出想要的标签

由上可知下述两两等价
$(‘div span:first‘)
$(‘div span‘).first()

$(‘div span:last‘)
$(‘div span‘).last()

$(‘div span:not("#d3")‘)
$(‘div span‘).not(‘#d3‘)

操作标签：
操作类属性：
在介绍中我们操作class属性使用的是classList下的方法，，而jQuery为我们提供了更简单的方法。
addClass（）-------------->classList.add（）添加属性
removeClass（）-------------->classList.remove（）删除属性
hasClass（）-------------->classList.contains（）属性判存
toggleClass（）-------------->classList.toggle（）有删无添
jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

位置操作：
offset（） 相对于浏览器窗口位置
position（） 相对于父标签位置
scrollTop（） scrollLeft（） 对于有滚动条的文本通过输入参数来移动滚动条位置，括号内不加参数是获取

尺寸操作：
.height() 文本
.width()
.innerHeight() 文本+padding
.innerWidth()
.outerHeight() 文本+padding+border
.outerWidth()

文本操作：
.text（） 操作文本 括号内不加参数是查询，加参数是操作
.html（） 操作文本 可以识别html语言
.val（） 相当于js中的.value（）

属性操作：
.attr（）一个参数获取对应属性，两个参数更改属性
.removeAttr（） 删除属性
对于标签上有的能够看到的属性和自定义属性用attr，对于返回布尔值比如checkbox radio option是否被选中用prop

文档处理：
$("<标签>") 创建标签
.append（） 尾部添加子标签
.prepend（） 头部添加子标签
$(‘标签‘).after() 放在某个标签后面
$(‘标签‘).before() 放在某个标签前面
$(‘标签‘).remove() 标签从树中删除
$(‘标签‘).before() 清空标签

事件：
第一种
$(‘#d1‘).click(function () {

});

第二种(功能更加强大 还支持事件委托)
$(‘#d2‘).on(‘click‘,function () {

})
克隆事件：
.clone（） 默认情况下只克隆html和css 不克隆事件，当我们传一个true参数给clone的时候才会克隆事件。

* 左侧菜单

```html
<script>
$(‘.title‘).click(function () {
// 先给所有的items加hide
$(‘.items‘).addClass(‘hide‘)
// 然后将被点击标签内部的hide移除
$(this).children().removeClass(‘hide‘)
})
</script>
<!--尝试用一行代码搞定上面的操作-->
```

* 返回顶部

```python
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$(‘#d1‘).removeClass(‘hide‘)
}else{
$(‘#d1‘).addClass(‘hide‘)
}
})
</script>
```

* 自定义登陆校验

```python
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>

<script>
let $userName = $(‘#username‘)
let $passWord = $(‘#password‘)
$(‘#d1‘).click(function () {
// 获取用户输入的用户名和密码 做校验
let userName = $userName.val()
let passWord = $passWord.val()
if (!userName){
$userName.next().text("用户名不能为空")
}
if (!passWord){
$passWord.next().text(‘密码不能为空‘)
}
})
$(‘input‘).focus(function () {
$(this).next().text(‘‘)
})
</script>
```

* input实时监控

```python
<input type="text" id="d1">

<script>
$(‘#d1‘).on(‘input‘,function () {
console.log(this.value)
})
</script>
```

* hover事件

```python
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })

$(‘#d1‘).hover(
function () {
alert(‘我来了‘) // 悬浮
},
function () {
alert(‘我溜了‘) // 移开
}
)
</script>
```

* 键盘按键按下事件

```html
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert(‘你按了shift键‘)
}
})
</script>
```
阻止后续事件发生： 我们最常用的是return false，通过这个骚操作，后续的事件 将不会被执行
虽然不常用我们还是要了解他的第二种方法e.preventDefault()

阻止事件冒泡： 我们依然可以用return false来阻止冒泡的额发生，他也存在方式二，e.stopPropagation()

事件委托：
$(‘body‘).on(‘click‘,‘button‘,function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})

页面加载：我们在js中使用.onload（）等待页面加载，但在jQuery中我们使用不同的方法
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""

动画效果：
$(‘#d1‘).hide(5000) //隐藏
$(‘#d1‘).show(5000) //展示
$(‘#d1‘).slideUp(5000) //挂起
$(‘#d1‘).slideDown(5000) //展开
$(‘#d1‘).fadeOut(5000) //淡出
$(‘#d1‘).fadeIn(5000) //淡入
$(‘#d1‘).fadeTo(5000,0.4)

补充：each（）方法：接下来的每一个，可以当做for循环来使用比较方便
data（）：帮助我们存储数据，并且在用户端无法看见。

我们更多的是使用js与jQuery结合情景一起使用。