jQuery基本使用方法
jQuery介绍
jQuery是一个快速，小巧，功能丰富的JavaScript库。它带有大量的易于使用的API，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。
另外，它只是封装了js的DOM的操作和ajax，其它的未封装，所以js是包含jQuery的。使用jQuery，可以更加方便的操作DOM。
jQuery兼容多个浏览器的，你在使用jQuery的时候就不需要考虑浏览器兼容问题。
jQuery的宗旨是：write less, do more
使用jQuery可以做很多事情，比如：
选择器、筛选器、样式操作、文本操作、属性操作、文档处理、事件、动画、插件
each、data、Ajax(重点 django部分学)
jQuery是js的一个库，这类似Python中的模块，使用jQuery之前需要先导入jQuery。
jQuery导入方式
目前，jQuery主要使用的版本是3.4、3.5。
第一种方式：本地文件导入
其实，jQuery本质上就是一个js文件，我们从官网下载该文件后，在我们的HTML代码中，通过script标签的src属性引入即可。
补充：jquery文件分两种：压缩版(.min.js结尾)和不压缩版(.js结尾)。压缩版主要用在线上生产环境；不压缩版主要用在实际项目开发中。
第二种方式：jquery的CDN服务
CDN（Content Delivery Network）直接翻译：内容分发网络。其实就是将一个地方的网络资源分布在不同的网络位置，这样当用户请求资源时，就可以就近获取资源，节省时间。
CDN有免费的也有付费的服务。使用CND引入的方式必须保证当前计算机有网络。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
jQuery基本语法
jQuery(选择器).action() # 可以简写如下
$(选择器).action()
jQuery与原生js对比
// eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
补充：
- jquery对象在保存名字时，规范命名方式：
$pEle
标签对象和jQuery对象
掌握两点：区分标签对象和jQuery对象；熟练两者之间的转换
- jQuery对象通过索引值为
0的值就是标签对象 - 标签对象套一个
$就是jQuery对象
$('#d1')[0] // jQuery对象 ----> 标签对象
<div > … </div>
document.getElementById('d1')
<div > … </div>
$(document.getElementById('d1')) // 标签对象 ----> jQuery对象
w.fn.init [div#d1]
查找标签
基本选择器
类似CSS的基本选择器：id选择器、class选择器、标签选择器
$('#d1') // id选择器， w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
$('.c1') // class选择器
$('span') // 标签选择器
$('*') // 所有的
层级选择器/分组嵌套
层级选择器，或者说是组合选择器。个人感觉层级选择器的叫法更加见名知其意。
类似CSS的层级选择器和分组选择器
$('div span') // 后代 空格
$('div>span') // 儿子，>
$('div+span') // 毗邻, +
$('div~span') // 弟弟, ~
$('#d1, .c1,p') // 选择多个,逗号分割
$('div#d1') // w.fn.init [div#d1, prevObject: w.fn.init(1)]，同时满足条件的
$('div.c1')
属性选择器
类似CSS的属性选择器，[]
$('[username]')
$('[username="the3times"]')
$('input[username="the3times"]')
$('[type]')
$('input[type="text"]')
基本选择器
$('ul li') // 后代选择器， ul下面所有的li
$('ul li:first') // 大儿子, ul的第一个li
$('ul li:last') // 小儿子, ul的最后一个li
$('ul li:eq(2)') // 索引值等于，某个值的li
$('ul li:gt(2)') // 索引值大于，某个值的li
$('ul li:lt(2)') // 索引值小于，某个值的li
$('ul li:even') // 偶数索引的li(包含0)
$('ul li:odd') // 奇数索引的li
$('ul li:not("#d1")') // 获取排除id是d1的所有li
$('div:has("p")') // 获取有子标签，且子标签中有是p标签的div
表单选择器
仅用在form表单标签内的那些标签上，如：input、select、textarea标签
$('input[type="text"]')
$('input[type="password"]') // 完整的选择器写法
$(':text') //简化的写法
$(':password')
// 下面这些都是简化后的方式
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
除了input的type属性可以简化，其他的表单属性也可以有类似的简化写法。
:enabled
:disabled
:checked // $(':checked')
:selected
特殊情况：
checked的简化写法不仅获取input还获取optionselected的简化写法只获取option- 如果使用
checked获取input时，手动添加限制条件：$('input:checked')
$(':checked')
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
$(':selected')
w.fn.init [option, prevObject: w.fn.init(1)]
筛选器方法
筛选器方法，其实和上述选择器的目的一样，区别在于它是通过某一个基准jQuery象的内置方法，来定位其他的jQuery对象。
定位同层级的jQuery对象
$('#d1').next() // 同层级下面一个
$('#d1').nextAll() // 同层级下面所有的
$('#d1').nextUntil('.c1') // 同级别下面的所有，直到指定对象之前的（不包括指定的对象）
$('.c1').prev() // 类似，同层级上面一个
$('.c1').prevAll()
$('.c1').prevUntil('#d2')
$('#d2').siblings() // 同级别上下所有
定位不同层级的jQuery对象
$('#d3').parent() // 第一级父标签，可以链式找到document
$('#d3').parent().parent() // 链式
$('#d3').parents() // 所有的父级标签，直到html
$('#d3').parentsUntil('body') // body标签以下的父级标签
$('#d2').children() // 所有的子标签
其他
$('div').find('p') // 等价于 $('div p'), 找div里面的p标签
$('div span').first() // 等价于 $('div span:first')，找第一个span
$('div span').last() // 找最后一个span
$('div span').not('#d3') // 等价于 $('div span:not("#d3")'), 排除id是d3的所有div中的span标签
$('div span').hasClass('C1') // 返回布尔值 true/false
标签操作
标签操作的范围包括：标签CSS样式、类属性的增删改查、窗口位置、标签尺寸相关、标签本文内容的增删改查、input数据值、属性相关、标签节点的增删改查等。
类的操作
addClass(name)
removeClass(name)
hasClass(name) // 判断是否有class，返回不布尔值
toggleClass(name)
CSS操作
jQuery具有非常强大的链式操作，即每次调用jquery对象的方法后，依然会返回当前jQuery对象，可以继续调用对象的方法。
$('p#d1').css('color', 'red')
位置操作
位置操作的内容主要是获取浏览器窗口页面的滚动位置、标签相对位置等。
offset() // 相对浏览器窗口，x,y方向偏移量
position() // 相对父级标签，x,y方向偏移量
$(window).scrollTop() // 获取当前浏览器窗口顶部位置
$(window).scrollTop(300) // 设置当前浏览器窗口顶部位置
scrollLeft() // 浏览器窗口左右位置
尺寸
尺寸操作，主要包括标签的三个尺寸参数：文本的宽高、文本+内填充的宽高、文本+内填充+边框的宽高。
$('p').height() // 文本宽高
$('p').weight()
$('p').innerHeight() // 文本+padding
$('p').innerWidth()
$('p').outerHeight() // 文本+padding+border
$('p').outerWidth()
文本操作
文本操作，获取标签内的文本内容，设置修改标签内文本内容。括号内传参是设置，不传参是获取文本。
$('p').text() // 类似js的innerText
$('p').html() // 类似js的innerHTML
input值
$(':text').val() // 获取input输入框内用户输入的value值,当存在多个输入框时获取第一个的value值
$(':file')[0].files[0] // 获取第一个文件输入框内的第一个文件对象
属性操作
标签属性的增删改查操作
attr(name) // 获取jquery对象的标签属性值
attr(name, value) // 修改，增加对象属性及属性值
removeAttr(name) // 移除对象的某个属性
// 为对象设置属性
$pEle.attr('class','c1');
/
使用prop()查看是否被选中，针对用户选择的标签，checkbox、radio、option，返回布尔值。
$('#d2').prop('checked') // 查看
false
$('#d3').prop('checked', true) // 设置
w.fn.init [input#d3]
标签节点操作
在标签节点中，手动增加新节点、或删除老节点。
标签$('<p>') // 创建p
$('#d1').append($pEle) // $('#d1')尾部追加节点pEle
$pEle.appendTo($('#d1')) // pEle追加到节点$('#d1')的尾部
prepend() // 头部添加
prependTo()
after() // 标签后面插入
insertAfter()
before() // 标签前面插入
insertBefore()
$('#d1').remove() // 将标签从DOM树中删除
$('#d1').empty() // 清空标签内部所有的内容
事件
主要事件
jquery绑定事件方式
$(选择器).click(function(){}); // 第一种
$(选择器).on('click', function(){}) // 第二种(更加灵活，还支持事件委托)
this对象
jquery中的this对象：当前被操作的标签对象，通过$(this)转成jquery对象。
clone事件
clone()方法默认情况下只克隆html和css不克隆事件，括号内使用true可以克隆事件。
$('#d1').on('click', function () {
$(this).clone(true).insertAfter($('body'))
})
回到顶部：scroll
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
</script>
focus事件
文本框聚焦时触发
$('input').focus(function () {
$(this).next().text('')
})
input事件：实时监控
<input type="text" >
<script>
$('#d1').on('input', function () {
console.log(this.value)
})
</script>
hover事件：鼠标悬浮
hover包含两个事件：进入悬浮和离开；当hover内只有只有一个函数时，两次事件都执行该函数，有两个函数时分别执行。
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>
keydown按键事件
键盘按钮按下去的事件
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
阻止后续事件
一个事件源绑定多个事件时，可以通过手动终止的方式，阻止后续默认的其他事件触发。
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// return false; // 阻止标签后续事件的执行 方式1
e.preventDefault() // 阻止标签后续事件的执行 方式2
})
</script>
事件冒泡
子标签和父标签绑定了一个相同的事件，子标签的事件触发后会进而触发父标签的事件，有两种方式阻止这种事件冒泡行为。
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
事件委托
需求：普通情况下，给页面上已经存在的标签绑定的事件无法作用在，后来新增的同类标签。也就是说，给页面上所有的button标签绑定一个click事件，只有当前页面上已经存在的button标签才有click事件，后来再通过js动态添加的button标签无法获得这个click事件。
解决办法：事件委托。可以这样理解：将事件交给一个角色来处理，而不是具体的人。换句话说，将指定的任务交给这个岗位上的员工处理，而不是具体的员工A或者员工B。
<script>
// 事件委托
$('body').on('click','button',function () {
alert(123) // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的
})
</script>
补充
页面加载
# 等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
"""jQuery中等待页面加载完毕"""
# 第一种
$(document).ready(function(){
// js代码
})
# 第二种
$(function(){
// js代码
})
# 第三种
"""直接写在body内部最下方"""
动画效果
$('#d1').hide(5000) // 5s内隐藏
$('#d1').show(5000) // 显示
$('#d1').slideUp(5000) // 上翻
$('#d1').slideDown(5000) // 下翻
$('#d1').fadeOut(5000) // 淡出
$('#d1').fadeIn(5000) // 淡入
$('#d1').fadeTo(5000,0.4) // 淡出到...
其他
each()，封装了for循环的功能
# each()， 循环处理每个子元素
// 方式1，类似对象调用自己的绑定方法，可以接收两个参数，
$('div').each(function(index, obj){console.log(index,obj)})
# 方式2， 类似类调用对象的绑定方法，需要传一个对象
$.each([111,222,333], function(index, obj){console.log(index,obj)})
data()，能够让标签帮我们存储数据，并且用户肉眼看不见(不会加到html上)
# data， 给每个子元素添加属性（对用户隐藏的）
$('div').data(attr_name, attr_value) // 添加
$('div').first().removeData(attr_name) // 移除
- 上一篇 »Java 中JOptionPane的基本使用方法
- 下一篇 »jQuery笔记，四：使用css
