JQuery

Posted 2020-10-02 YC小杨

====什么是jquery

1.Jquery是一个js函数库,又常常被叫做jq,里面代码很多,但是用的时候代码很少,是目前js的主流框架

2.使用JQ就可以做出我们前面做过的所有效果,那为何还要学习js? Js是语言基础,jq是js的代码库的封装,比如在jq中我们不可能看到基本数据类型有哪些,因为js有哪些jq中使用得就是这些,不管js还是jq,都是我们做项目使用得工具而已,要做出漂亮并且高性能的界面,主要还是看个人的灵活运用工具的能力(项目经验)

 

====下载地址

两个版本,开发测试用的,实际网站用的(都一样) http://jquery.com/

然后在代码里面引入后就可以用了<script src="文件路径"><script/>

 

====CDN（内容分发网络）

不下载也可以通过 CDN:内容分发网络引用(就是有的网站服务器存的有jqruery库,填好CDN地址直接让用户把它加载到浏览器缓存以后随时就可以使用了)

百度:搜索百度CDN,然后找到需要的库引入

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

 

常用的CDN:又拍云,新浪,谷歌(不要用谷歌,请支持国产,主要是谷歌的服务器在国外)

 

====$() , jQuery(),自定义名字

jq函数库中定义了一个全局函数:jQuery(),这个函数的使用是最多的,因此,为了敲代码快,还给它定义了一个快捷名:$

var div1=jQuery(‘div’)//得到所有div标签

var div2=$(‘div’)//得到所有div标签

每次都写$不爽,而且万一有其他框架也用的$开头咋办?

自定义名字:

var hq = $.noConflict()

var div3=hq(‘div’)//得到所有div标签

 

====$()查询

$()方法有两个参数:

第一个参数可以是选择器,可以是对象:

$(‘#div1’)//所有id为div1的元素.

$(document) //所有document   其实只有一个

第二个参数是可选的,代表范围不写默认就是document,就是在全文档下查找

$(‘p‘,‘#div2‘)//所有id为div2下的p元素

 

$()方法的返回值

$()返回的是一个jq对象,jq对象是一个类数组,跟querySelecterAll()方法返回的nodelist类似

比如:

$(‘div’)返回值是一个装有所有(大于等于0)div标签的类数组.

$(document)返回值是一个装有当前doucument对象的类数组

 

 

====jq对象

属性:

$()方法返回的jq对象有四个属性

length:返回的元素个数

//$(document).length 为1

 

selector:创建jq对象(不是DOM对象)的选择器字符串(前提是创建时有选择器的字符串)

//$(‘p‘,‘#div2‘)对象的selector属性为"#div2 p"

 

context:上下文,元素所在document对象

//$(‘p‘,‘#div2‘)对象的context属性为document

 

jquery:jq的版本号,是否存在,主要为了跟其他类库做区分

//$(‘p‘,‘#div2‘)对象的jquery属性为2.1.4

 

方法:

$()方法返回的jq对象的方法有许多,我们主要就是学习这些方法

 

====元素属性attr()

更改:传对象或者下面第二种方式,按照键值对更改,类数组中所有的元素都更改

$(".bt").attr({‘value‘:‘123‘,‘style‘:‘background:red‘})

$(".bt").attr(‘style‘,‘background:red‘)

 

获取:只传属性名,没有设置过获得的是undefined,只获取类数组中第一个元素的

$(".bt").attr(‘style’)

 

获取和更改:

$(".bt").attr("属性",function(index,oldValue){return newValue})

//回调函数:第一个参数是属性,index代表所选多个标签的第几个 oldValue代表获取到的旧值 newValue代表新值

例:$(‘p‘,‘#div2‘).attr(‘style‘,function(index,oldValue){

       console.log(oldValue)

       if(index==0){

       return ‘background-color:red‘

       }else{return ‘background-color:yellow‘}

       })

 

 

====元素的样式css()

跟attr()方法类似,只不过这个方法作用于css的样式,而不是元素的html属性

 

获取:只获取类数组中第一个元素的,样式名可以用连字符也可以用驼峰法,不能获取复合样式,(按照版本来,以实际为准)只能获取单个样式值,获取数值时会转化为有单位的字符串//10px

$(‘p’).css(‘background-color’)

$(‘div’).css(‘backgroundColor’)

 

设置:设置类数组中所有元素,可以设置复合样式,一个样式可以不用传对象,直接写样式名和设置值

$(‘p’).css(‘background-color’,’red’)//一个样式

$(‘p’).css({‘background-color’:’red’,’textColor’:’blue’})//一个或者多个,传对象

$(‘p‘).css({‘border‘:‘1px solid red‘})//设置复合样式

$(‘p‘).css(‘font-size‘,function(index,old){

if(index>1){return  2*parseInt(old)}

else{return old}

})//第二个p元素以后的元素的字体放大2倍

 

====元素内容

val()

获取:类数组第一个元素的value值

$(‘input’).val()//获取第一个input的value值

 

设置:设置所有元素的value值(参数为值或者函数)

$(‘input’).val(1)//把所有input的value值设为1

$(‘input‘).val(function(index,old){

       if(index>0){return 10}

       else{return 100}

       })//第一个input的value值设为100,其他设为10

 

html()

获取:类数组第一个元素的HTML内容,包括子元素的标签名

$(‘div‘).html()//第一个div元素的尖括号里面的内容

 

设置:设置所有元素的HTML内容,标签会做解析,跟DOM中的innerHTML一样会格式化替换调内部的内容(jq里就是用的它实现的)

$(‘div‘).html(‘<p>250</p>‘)//把所有div的内容改为250,p标签的功能渲染

$(‘div‘).html(function(index,old){

       console.log(old)

       if(index>0){return ‘<h5>666</h5>‘}

       else{return ‘<h1>111</h1>‘}

       })//第一个div的HTML内容设为111,用<h1>标签的功能解释,其他设为666,用<h5>标签的功能解

 

 

text()

获取:获取类数组中所有元素的所有子孙文本节点的纯文本内容

$(‘div‘).text()//所有div的所有内部文本

设置:设置所有元素的本文内容,内容内部的标签不会做解析

$(‘div‘).text(‘<h1>666</h1>‘)//把所有div的文本内容换为<h1>666</h1> 注:标签也会展示出来

$(‘div‘).text(function(index,old){

       if(index>0){return ‘hello‘}

       else{return ‘hq‘}

       })//第一个div的展示内容设为hq,其他为hello

 

====遍历

①长辈

parent()//爸爸

parents()//爸爸爷爷...

parentsUntil()//爸爸爷爷..到某个标签结束

例:

jq(“span”).parent(“div”).css({"background-color":"blue"})//span的爸爸并且还得是div的背景为blue

jq(“span”).parents().css({"background-color":"blue"})//span的所有直系长辈的背景为blue

jq(“span”).parentsUntil(“div”).css({"background-color":"blue"})//span的爸爸爷爷..到div结束的背景为blue

②晚辈

children()//儿子

find()//所有后代

③同胞

siblings()//所有同胞元素

next()//下一个同胞元素

nextAll()//下一个和后面所有同胞元素

nextUntil(“元素1”)//到元素1之间的所有同胞

 

====盒子尺寸

width()//这里获得的宽高跟css()数据类型不一样

innerWidth()

outerWidth()

outerWidth(true)

 

height()

innerHeight()

outerHeight()

outerHeight(true)

///这八个方法有的不能设置(没有setter方法),根据实际情况来:比如width(100)

 

====盒子位置

offset()// 获取或设置坐标值(相对文档)设置值后变成相对定位,返回一个坐标对象,设置也传对象属性是left和top //offset().top    offset({left:100})

position()       // 获取坐标值(相对父亲)只能读取不能设置//readOnly

scrollTop()//设置或获取元素滚动条垂直卷去的距离:设置scrollTop(100)

scrollLeft()//设置或获取元素滚动条水平卷去的距离

 

====data()

data()方法可以给jq元素设置和获取数据,以键值对的方式

$(‘div’).data(‘a’,100)//存了一个{‘a’:100}//如果已经存过key为’a’的值,这里就是更改

$(‘div’).data(‘a’)//获取存的值

$(‘div’).removeData(‘a’)//删除值(这里的删除跟赋值为null不一样)

 

====修改文档结构

append()//在被选元素的结尾插入n个元素:$(‘#div’).append(‘你好’,’666’)

prepend() //在被选元素的开头插入n个元素

after() //在被选元素之后插入n个元素

before()//在被选元素之前插入n个元素

replaceWith()//把被选元素替换掉

remove()//删除被选元素和他的后代

empty()//删除被选元素的后代

 

上面的增改方法的参数可以是这5种

var txt1=’我就是个纯文本’

var txt2="<p>文本</p>"// HTML 标签字符串

var txt3=$("<p></p>").text("文本") // 使用 jQuery 创建的对象

var $(“#div1”).after(txt3)

var txt4=document.createElement("p");txt4.innerHTML="文本" //DOM 创建的对象

var $(“#div1”).after(txt4)

 

var txt5=$(‘#p1’)//文档中已经存在的,它自己会被从文档的原来位置移除

//例:$(‘#div1’).replaceWith(txt5)//把id为div1的元素替换成id为p1的元素

 

clone()//克隆元素(包括后代),返回的对象不在文档中//var cp1=$(‘#p1’)

clone(true)//浅克隆----深克隆

 

====事件(return false阻止冒泡)

鼠标//基础好的:123次点击,右键点击

click  单击对象(按下松开)

dblclick  双击对象

mousedown 在对象上按下时

mouseup  按下,在对象上松开时

mousemove 鼠标在对象上移动时

mouseover 鼠标指针穿过被选元素区域触发,穿过其子元素区域也触发

mouseout 鼠标指针离开被选元素或者子元素区域

mouseenter 鼠标指针穿过被选元素区域

mouseleave 鼠标指针离开被选元素区域

 

键盘:焦点在哪里哪个控件的键盘事件才触发

keypress  键盘按键被按下并松开。

keydown 键盘按键被按下。      

keyup        键盘按键被松开。

 

表单

focus节点获得焦点后触发

blur节点失去焦点后触发

 

focusin将要获得焦点时触发，发生在focus事件之前

focusout将要失去焦点时触发，发生在blur事件之前

change内容改变时

//input

      

reset 表单重置时

submit 表单提交时

 

加载(图片文档等)

load 完成加载

abort加载被中断

error       加载发生错误

 

悬浮

hover//注:hover(fn1,fn2)  hover事件要求有两个回调函数,分别是移入和移除,只写一个回调函数时,两个状态都触发同一个函数

 

====事件对象

事件触发时会传入回调函数一个事件对象,这个对象的属性包含了事件触发时的一些信息

鼠标

altKey 鼠标事件发生时，是否按下alt键,返回一个布尔

ctrlKey 鼠标事件发生时，是否按下ctrl键,返回一个布尔

metaKey  鼠标事件发生时，是否按下windows/commond键,返回一个布尔

shiftKey 鼠标事件发生时，是否按下shift键,返回一个布尔

clientX，clientY返回鼠标位置相对于浏览器窗口左上角的坐标，单位为像素

screenX，screenY返回鼠标位置相对于屏幕左上角的坐标，单位为像素

键盘

altKey，ctrlKey，metaKey，shiftKey返回一个布尔值，表示是否按下对应的键

key属性返回一个字符串，表示按下的键名。如果同时按下一个控制键和一个符号键，则返回符号键的键名。比如，按下Ctrl+a，则返回a。如果无法识别键名，则返回字符串Unidentified

 

 

 

====绑定事件mouseleave(fn)

 

回调函数返回值为false时阻止冒泡

 

①

jq(“button”).click(fn)

jq(“button”).mouseenter(fn)

jq(“button”).

jq(“button”).click(fn).mouseenter(fn).mouseleave(fn)

 

②bind(“events”,fn);//多事件用空格隔开

jq(“button”).bind(“click  mouseenter mouseleave”,fn)

 

③不同的事件想触发不同的方法,传一个对象进去

jq(“button”).bind({“click”:fn,”mouseenter ”:fm,”mouseleave”:fo})

 

④触发一次one(“event”,fn)

jq(“button”).one(“click”:fn)

 

====多元素绑定事件

①原始的//每个li都绑定了一个事件

jq(“li”).bind(“click”,function(){alert(jq(this).html())})

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

 

②代理//只给ul(一定要绑父亲)绑定了事件(冒泡)

jq(“ul”).delegate(“li”,”click”,function(){alert(jq(this).html())})

 

③前面所有的方式都忘掉,用这种:on(“events”,”selector”,fn)

jq(“ul”).on(“click”,”li”,function(){alert(jq(this).html())})

//ul 是on方法第二个参数li的爸爸,on第一个参数是事件,第二个参数是选择器,第三个参数是回调,回调里面的this关键字是个指针,指向触发click事件的对象.

 

事件解绑

对应的unbind   undelegate      off

例子:jq(“ul”).on(“click  mouseenter”,”li”,function(){alert(jq(this).html())})

     jq(“ul”).off(“click”)

现象:鼠标移入触发,点击却不触发

 

====事件触发

事件的触发有两种方式

1.真事件触发:真的用鼠标点了

2.假事件触发:用代码让事件触发(2种方式):

①事件名调用时不传参数(不传回调函数):$(‘#div’).click()

②$(‘#div’).trigger(‘click’)

 

 

 

====动画

1.隐藏

hide(sd,fn)隐藏元素

show(sd,fn)显示元素

toggle(sd,fn)隐藏显示开关(来回掉用)

//参数都是可选的,sd是速度可填slow fast normal 或数字(ms),fn是回调函数

//jq(“p”).hide(2000,function(){alert(666)})

2.淡入淡出

fadeIn(sd,fn)//淡入已经隐藏的元素

fadeOut(sd,fn)//淡出已经显示的元素

fadeToggle(sd,fn)//淡出入开关

fadeTo(sd,alpha,fn)//自定义透明度

//参数都是可选的,sd是速度可填slow fast normal或数字(ms),alpha是透明度,fn是回调函数

3.滑动隐藏

 slideUp(sd,fn)//向上滑动隐藏

 slideDown(sd,fn)//向下滑动显示

 slideToggle(sd,fn)//上下滑动隐藏显示开关

//参数都是可选的,sd是速度可填slow fast normal 或数字(ms) fn是回调函数

4.自定义//帧动画,补间动画

animate({属性},sd,fn)//动画

//要让元素实现动画,必须设置定位

//参数:{}必填,sd可选动画时间,fn可选,回调函数

//属性必须用驼峰命名法写,不能用原始的css属性:margin-left改为marginLeft

动画队列,队列按照顺序依次执行:

        jq("button").click(function(){

             jq(".div").animate({ width:‘200px‘});//队列1

             jq(".div").animate({ width:‘2000px‘});//队列2

             jq(".div").animate({ width:‘200px‘});//队列3

            })

5.停止属性改变

jq(".div").stop(bool,bool)//停止动态改变属性的现象:比如动画 滑动(参数:都可选布尔值,第一个是否停止所有队列,第二个是否立即执行完所有效果)