前端之JQuery

目录

• jQuery简介
  • 基本介绍
  • 版本区别
  • 下载使用
  • 导入方式
    • 本地jQuery文件
    • CDN加速服务
  • 基本使用
  • 查找标签之基本选择器
  • 查找标签之基本筛选器
  • 查找标签之属性选择器
  • 表单筛选器:专门针对form表单内的标签
  • 筛选器方法
    • 同级别往下查找
    • 同级别往上查找
    • 查找父标签
    • 查找子标签和兄弟标签
  • 链式操作
  • jQuery操作标签
    • class操作
    • 样式操作
    • 位置操作
  • 文本值操作
  • 属性操作
  • 文档处理
    • 内部添加
    • 外部添加
    • 清空内容
  • 事件操作
    • js绑定
    • jQuery绑定
    • 克隆操作
  • 悬浮事件
  • 值监听事件
  • 阻止后续事件
  • 事件冒泡
  • 事件委托
  • 动画效果
    • 基本
    • 滑动
    • 淡入淡出
    • 自定义

jQuery简介

基本介绍

1. 兼容多浏览器
   特别是IE浏览器:很多时候针对IE浏览器，前端需要针对IE浏览器重新写一份代码
2. 封装了js代码
   核心代码只有几十KB，加载速度快，极大的提升浏览器加载效率
3. 宗旨
   "Write less, do more."
4. Ajax交互
   异步提交和局部刷新

版本区别

1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678

下载使用

下载地址:https://jquery.com/
注意：jQuery必须先导入才可以使用
jQuery就是一个js文件，里面提前封装了一些js代码

导入方式

本地jQuery文件

不会收到网络影响

CDN加速服务

需要确保有互联网
min.js 压缩之后的文件，容量更小
.js 没有压缩的文件，容量稍大

基本使用

将页面上的两个div标签文本内容一个变成红色，一个变成绿色
原生的js代码：

let p1Ele = document.getElementsByTagName('d1')
let p2Ele = document.getElementsByTagName('d2')
p1Ele.style.color = 'red'
p2Ele.style.color = 'green'

jQuery代码：

$('#d1').css('color','red').next().css('color','green')

查找标签之基本选择器

$('#d1') # id选择器
$('.c1') # class选择器
$('p') # 标签选择器
$('div#d1')
$('div,#d1,.c1')
$("x y") // x的所有后代y（子子孙孙）
$("x > y") // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y

查找标签之基本筛选器

$('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)')

查找标签之属性选择器

$('[name]')
$('[name="trump"]')
$('div[name="trump"]')

表单筛选器:专门针对form表单内的标签

$('input[type="text"]') 筛选器简化 $(':text')

$(':checked') 会将option也找到
$(':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().prev().next().children()

jQuery操作标签

class操作

jQuery操作	DOM操作
addClass()	classList.add()
removeClass()	classList.remove()
hasClass()	classList.contains()
toggleClass()	classList.toggle()

样式操作

$divEle.css('border','5px solid black')

位置操作

$(window).scrollTop() 获取左侧滚动条距离顶端的位移量

文本值操作

jQuery操作	DOM操作
text()	innerText
html()	innerHTML
val()	value
转js对象	files

属性操作

$('div').attr('style') 获取第一个标签的style属性值
$('div').attr('class','c1') 批量设置单个
$('div').attr({'name':'kevid','age':24}) 批量设置多个
$('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(){})

克隆操作

点我！！！

悬浮事件

$('#d1').hover(function () {prompt('登陆成功')}) 鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作，需要写两个函数
$('#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(){})

动画效果

基本

show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])

滑动

slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])

淡入淡出

fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

自定义

animate(p,[s],[e],[fn])