前端之jQuery

前端之jQuery

1. jQuery介绍

jQuery 是一个 JavaScript 库。它封闭了原生的js代码，能够在书写更小的代码完成js操作。类似Python中的模块，但是在前端中叫类库。

它兼容多个浏览器。jQuery的宗旨:write less do more

jQuery官方网站

1.1 jQuery版本

• 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
• 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
• 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

jQuery版本选择3.x的版本，下载时有里有压缩和不压缩之分，在生产环境使用压缩版本。

1.2 jQuery导入

jQuery需要导入才能使用

本地导入:

    

网络导入
免费jquery CDN网站:https://www.bootcdn.cn/jquery/

1.3 jQuery基本语法

jQuery(选择器).action() 这么写比较复杂 jQuery可以简写为$

$(选择器).action()

原生js代码和jQuery代码对比

// jS代码:
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color='green'
// jQuery代码:
jQuery('p').css('color','blue')

1.4 jQuery中查找标签

1.4.1 基本选择器

//html代码:

    




春来江水绿如蓝



//jquery
ID选择器
$('#d1')
类选择器
$(".c1")
标签选择器
$('span')

//jquery取的值为jquery对象, 表现形式为数组。
jQuery对象变成标签对象:
$('#d1')[0]  //因为为数组可以切片取值
标签对象转jquery对象：
使用$()括号起来就行：
$(document.getElementById('d1'))

1.4.2 组合选择器

//HTML代码

div
    div-->span
    
div-->p
        div-->p-->span
    
    div-->span





// jquery代码:
$('div#d1') // 找id为d1的div标签
$('div.c1') // 找class为c1的div标签

$('#d1,.c1,p') // 同一级别 id为d1的标签,class为c1的标签和p标签 

$('div span')  //后代

$('div>span')  //儿子
$('div+span')	//毗邻
$('div~span')	//弟弟
这些选择器和CSS的一模一样。

1.4.3 基本筛选器

//HTML代码


    
100
    
101
    
102
    
103
    
104
    
105
    
106
    
107
    
108
    
109



//jquery:

$('ul li:first')	//第一个元素标签
$('ul li:last')		//最后一个元素标签
$('ul li:eq(2)')	//索引值是2的标签
$('ul li:even')		//索引值是偶数的标签(包含0)
$('ul li:odd')		//索引值是奇数的标签
$('ul li:gt(2)')	//索引值大于2的标签
$('ul li:lt(2)')	//索引值小于2的标签

$('ul li:not("#d1")')	//取反，id不是d1的标签

//HTML

    
div--p


    div not p 


//jquery:
$('div:has("p")')	//div里有p标签的 has包含 有

1.4.4 属性选择器

//HTML

    
    
    



//jQuery:
$('[username]')		//有username的标签

$('[username="hi"]')	//有username并且等于hi的标签

$('p[username="hello"]')	//username等于hello的p标签

1.4.5 表单筛选器

//HTML

    
username
    
password
    提交


//jquery:
$('input[type="text"]')		//input标签里类型是text的
$('input[type="password"]')		//input标签里类型是password的

//上面的写的法有点复杂在表单筛选器中，可以简写
$(':text')
$(':password')

//还有一些简写：
$(':file')
$(':radio')
$(':checkbox')  //使用时它不仅会拿到checked也会把selected也能拿到，如果只想拿到checked则加一些条件限制一下$(input:checked)
$(':submit')
$(':reset')
$(':button')


上面的只可以在表单筛选器中使用

1.4.6 筛选器方法

    span
    span

    

        div-->span
        
div-->p
            div->p->span
        
        div-->span
    
    span
    span
    span



// jQuery代码:
$('#d1').next() //同级别下一个
$('#d1').nextAll() //同级下面的全部
$('#d1').nextUntil('.c1')  //下面到class为c1为止(不包含c1)
$('.c1').prev()	 //同级别上一个
$('.c1').prevAll() // 上面的全部
$('.c1').prevUntil('#d2') //上面到id 为d2的为止
$('#d3').parent() // 父标签

$('#d3').parent().parent() // 父标签的父标签

$('#d3').parents()  //全部父标签(祖谱)
$('#d3').parentUntil('body')  // 查找父标签到body为止

$('#d2').children()  // 子标签
$('#d2').siblings()  // 全部同级别(上下都包含)标签(兄弟标签)


$('div').find('p') // find在某个区域内找P标签和$('div p')一样
$('div span').first() //div中第一个span标签
$('div span').last() //div中最后一个span标签
$('div span').not('#d3')  // /div中全部不包含id为d3的span标签

1.5 操作标签

操作类

js版本	jQuery版本	含义
classList.add()	addClass()	增加
classList.remove()	removeClass()	删除类
classList.contains()	hasClass()	是否包含
classList.toggle()	toggleClass()	有删除，没有就添加

jQuery的链式操作

    
AAA
	
BBB

//一行代码把AAA变成红色，BBB变成蓝色
$('p').first().css('color','red').next().css('color','blue')

jQuery操作css样式：  .css()
jQuery操作jQuery对象返回的还是jQuery对象那么还可以继续操作

获取当前标签的位置

$('p').offset()		//获取标签在窗口中的偏移量
$('p').position()	//获取标签针对父标签的偏移量
$(windows).scrolltop()	//获取垂直滚动条位置
$(windows).scrolltop(500) //

尺寸

$('p').height() //文本的高度
$('p').width()	//文本的宽度
$('p').innerHeight()  // 文本+padding
$('p').innerWidth()
$('p').outerHeight()	//文本+padding+border
$('p').outerWidth()		//

文本操作

js版本	jQuery版本	含义
innnerText()	text()	获取文本(不加载样式)，如果括号里面有值则为设置
innerHtml()	html()	获取文本(加载样式)，如果括号里面有值则为设置
.value	.val()	获取值，如果括号里有值则设置

示例:

//HTML

	
AAA

$('p').text() //获取文本
$('p').text("HHHH")  //设置文本
$('p').text("
AAAA
") //原样输出 
$('p').html()//获取文本
$('p').html("
AAAA
") //设置本(有样式)

// 获取输入值：

	


$('#d1').val()
"asdf"

// 获取上传的文件：

	



$('#d1')[0].files[0] 

属性操作

js版本	jQuery版本	含义
setAttribute()	attr(name,value)	设置属性
getAttribute()	attr(name)	获取属性
removeAttribute()	removeAttr(name)	删除属性

let $pEle=$('p')
$pEle.attr('id') //获取id的属性
"d1"
$pEle.attr('class') //获取class的属性

$pEle.attr('class' ,'c1') //设置class的属性

$pEle.removeAttr('class') //删除class的属性


/*
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值的如:checkbox radio option是否被选中的用prop
*/

$('#d2').prop('checked') //获取
$('#d2').prop('checked',true) //选中
$('#d2').prop('checked',false) // 取消选中

文档处理

createElement()			$('
')
appendChild()			append()


//HTML:


    div-->span
    
div-->p
        div->p->span
    
    div-->span


//jquery代码:
let $pEle=$('
')  //新创建一个p标签
$pEle.text("Hello World") //给这个P标签加文本
$pEle.attr('id','i1') //给这个P标签设置id为i1
$('#d2').append($pEle) //在id为d2的标签最后面加上这个p标签
$pEle.appendTo($('#d1')) //这个和上面的命令作用一样，把这个p标签加到id为d2的标签里面
$('#d2').prepend($pEle) //在头部追加
$pEle.prependTo($('#d1')) 

$('#d3').after($pEle) //在某个标签的后面
$pEle.afterTo($('#d3'))

$('#d3').before($pEle) //在某个标签的前面
$pEle.beforeTo($('#d3'))

$('#d2').remove() //从DOM树中删除标签(包含里面的全部标签)
$('#d2').remove() //清空标签内部所有的内容

2. jQuery 事件

2.1 绑定事件

Hello
Hi



// 第二种绑定方法更强大，它还支持事件委托

2.2 克隆事件

    
    
     

    


一入江湖岁月枯






// this 指代的是当前被操作的标签对象
// clone 默认情况下只克隆html和css样式，不克隆事件。
// 就是克隆出来的对象点击时它是无法创建对象的。
// 如果要把事件也克隆出来则需要给clone()转个true参数


//加上后克隆出来的对象点击时它就可以创建对象了。

2.３ 自定义模态框

    
    
     

    




    最底层

弹出窗口


    
username:
    
password:
    
    

2.4 左侧菜单栏

    
    
	-
    




    

        
 菜单一
            
111
            
222
            
333
        
        
 菜单二
            
111
            
222
            
333
        
        
 菜单三
            
111
            
222
            
333
        

    

2.5 返回顶部

    
    
       

    






回到顶部

2.6 自定义登录检验

//如果用户名或密码没有输入则提示



    
    
    



username:
    
    

password:
    
    

提交

2.7 input框实时监控

2.8 鼠标悬浮

	
测试悬浮
    
    


// hover是有两个事件组成，一个是鼠标悬浮一个是鼠标移开。
// 如果只写一个函数则两个事件都用这一个。如果写两个函数，则悬浮和移开使用不同的函数

	
测试悬浮
    
    

//如果只想让它弹出来一次，则让第二个函数为空

2.9 键盘按键事件

// 监测在键盘上按下什么键

2.10 阻止后续事件执行

    

        
        
    
    


// 提交后显示这个hello，但是提交后hello闪而过，这就是因为它有后续事件

阻止方法一:

    

        
        
    
    


方法二:

2.11 阻止事件冒泡

 div
    

    
 div-->p
        

        div-->p-->span
    




// 点击div-->p-->span 后上面的p和div也会弹出来(因为这三个标签是包含的，点了是里面的也会触发上面的)，不符合我们的预期。
//解决方法:

//方法二：

2.12 事件委托

    如何委婉的说你已经叛变了？
    
    

//动态增加一个button标签:
let butEle=$('')
butEle.text("委托")
$('body').append(butEle)
    
//但新增加的这个按钮是没有办法弹出窗口的。如果也要弹出窗口，写法:

2.13 页面加载

等待页面加载完毕后再执行代码

//之前的方法:
window.onload = function(){
    js代码
}

// jQuery中等待页面加载完后再执行:
//方法一:
$(document).ready(function(){
    js代码
})

//方法二:
$(function(){
    js代码
})

//方法三:
直接写在body内部最后面

3. jQuery其他

3.1 动画效果

    


$('#d8').hide(5000) //5秒钟隐藏
$('#d8').show(5000) //5秒钟出现
$('#d8').slideUp(5000) //5秒钟以滑动方式隐藏(自下而上)
$('#d8').slideDown(5000) // 5秒钟向下滑动
$('#d8').fadeOut(5000)	//淡出可见
$('#d8').fadeIn(5000) //淡入已隐藏的元素
$('#d8').fadeTo(5000,0.4) //允许渐变为给定的不透明度（值介于 0 与 1 之间）

3.2 其他

// each
$('div').each(function(index){console.log(index)}) //拿索引
$('div').each(function(index,obj){console.log(index,obj)})  //拿索引和值

$.each([1,2,3],function(index,obj{console.log(index,obj)})

//data
能够让标签帮我们存储数据，并且数据用户看不到

$('div').data('info','Hello World')  //给所有div加一个info属性值是Hello World.
//验证:
$('div').first().data('info')
Hello World
//删除:
$('div').first().removeData('info')