前端之jQuery
目录
jQuery介绍
jQuery是一个轻量级的兼容多浏览器的javascript库.它使用户能够更方便的处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
JQuery优势
它是一款轻量级JS框架, 核心文件只要10+kb.
是一个丰富的DOM选择器,
可以将多个操作写入一行代码里,是代码更加简洁,
事件,样式,支持动画, 支持Ajax操作.
跨浏览器兼容,
插件扩展开发.
'''版本区别'''
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可
使用JQuery必须要先导入, 其本质就是一个js文件.
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已
网络CDN服务, 是只要计算机能够联网就可以直接导入>>> bootcdn
下载链接：jQuery官网
中文文档：jQuery AP中文文档
'''导入方式'''
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像 var variable = DOM对象 $variable[0]//jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法
jQuery基础语法
$(selector).action()
基本使用
将页面上的两个p标签文本内容一个变成红色 一个变成绿色
原生的js代码
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'green'jQuery代码
$('#d1').css('color','red').next().css('color','green')JQ选择器 对比js
| 选择器 | JQuery | CSS |
| id | $("#id') | #i1{ background -color:red; } |
| 元素选择器 | p {color :" red"} | |
| 标签 | $("tagName") | |
| class | $(".className") | .c1 { front_size:14px;} p.c1 {color : red } |
| 配合使用 | $("div.c1") | |
| 所有/通用元素选择器 | $("*") | * {color :red'} |
| 组合选择器 | $("#id, .className, tagName") | 分组:当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 div, p {
color: red;
} 嵌套:多种选择器可以混合起来使用 .c1 p {
color: red;
} |
| 层级选择器 | x和y可以为任意选择器 | |
| 后代 | $(" x y ") ; // x的所有后代y
| /*li内部的a标签设置字体颜色*/ li a {
color: green;
} |
| 儿子 | $("x > y") ; // x的所有儿子y | /*选择所有父级是 <div> 元素的 <p> 元素*/ div>p {
font-family: "Arial Black", arial-black, cursive;
} |
| 毗邻 | $("x + y") // 找到所有紧挨在x后面的y | /*选择所有紧接着<div>元素之后的<p>元素*/ div+p {
margin: 5px;
} |
| 兄弟 | $("x ~ y") // x 之后所有的兄弟y | /*i1后面所有的兄弟p标签*/ #i1~p {
border: 2px solid royalblue;
} |
| 属性选择器 | [attribute] [attribute=value]// 属性等于 [attribute!=value]// 属性不等于 | /*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
} |
基本筛选器<了解>
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('ul li:first')
$('ul li:last')
$('ul li:eq(2)')
$('ul li:odd')
$('ul li:even')
$('ul li:gt(2)')
$('ul li:lt(2)')
$('ul li:not(li)')
$('ul:has(#d1)') # 查看内部含有id是d1的ul标签
css伪元素选择器
first-letter: 给首字母设置特殊样式
before; 每个<P>元素之前插入内容
after: 每个<P>元素之后插入内容
before和after多用于清除浮动。
属性选择器
$('[name]')
$('[name="jason"]')
$('div[name="jason"]')
jQuery选择器查找标签之后的结果与js有何区别?
结果集都是数组但是功能有区别
1.如果使用索引取值 那么都是标签对象 标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用 $() 转换成jQuery对象的目的是为了使用jQuery提供的更多方法
表单筛选器>>> 专门针对form表单内的标签
:text $('input[type="text"]') >>原始版
:password:file
:radio
:checkbox
:submit
:reset
:button表单对象属性:
:enabled
:disabled
:checked 会将option也找到
:selected 只会找到option标签<form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签<select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option
筛选器方法
同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")同级别网上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")查找父标签
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)
链式操作
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象
补充
原生js代码查找标签绑定的变量名推荐使用 xxxEle
jQuery代码查找标签绑定的变量名推荐使用 $xxxEle
jQuery操作标签
语法上比js简洁
class操作
jQuery操作 DOM操作
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()
样式操作
$divEle.css('border','5px solid black')位置操作
$(window).scrollTop() 获取左侧滚动条距离顶端的位移量实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})文本值操作
'''不写值就是获取 写了就是设置'''
| jQuery | DOM |
| text() | innerText |
| html() | innerHTML |
| val() | value |
| 转js对象 | files |
属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
prop('checked') 结果是布尔值
prop('checked',false) 动态设置
文档处理
内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
清空内容
$('body').empty()
事件操作
js绑定
标签对象.onclick = function(){}
标签对象.onchange = function(){}
jQuery绑定
jQuery对象.click(function(){})
jQuery对象.change(function(){})
克隆操作
<button id="d1">是兄弟就来砍我!!!</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
})
</script>悬浮事件
$('#d1').hover(function () {alert(123)})鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)}, # 悬浮触发
function () {alert(123)} # 移走触发
)值监听事件
jQuery绑定事件有两种方式
$('#d1').click(function(){})
$('#d1').on('click',function(){})
有时候第一种绑定事件的方式无法生效 那么就使用第二种
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>阻止后续事件
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
1.方式1(推荐使用)
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})事件冒泡
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
方式1
return false
方式2
e.stopPropagation()
事件委托
针对动态创建的标签 提前写好的事件默认是无法生效的
$('body').on('事件类型','选择器',function(){})将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})动画效果
hide 隐藏
show 展示
slideUp 滑动,上
slideDown 滑动,下
fadeIn 淡入
fadeOut 淡出
animate 自定义