jQuery

====什么是jquery 1.Jquery是一个js函数库,又常常被叫做jq,里面代码很多,但是用的时候代码很少,是目前js的主流框架 2.使用JQ就可以做出我们前面做过的所有效果,那为何还要学习js? Js是语言基础,jq是js的代码库的封装,比如在jq中我们不可能看到基本数据类型有哪些,因为js有哪些jq中使用得就是这些,不管js还是jq,都是我们做项目使用得工具而已,要做出漂亮并且高性能的界面,主要还是看个人的灵活运用工具的能力(项目经验)

====下载地址 两个版本,开发测试用的,实际网站用的(都一样) http://jquery.com/ 然后在代码里面引入后就可以用了

常用的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值(参数为值或者函数) //得到val和设置val返回值不一样

$('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() //这个方法可以设定一个无所谓的值，然后进行判断满足一些交互行为。（点击button 2次后不能再进行变化，但是其他button可以）； 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 jQuery的on（）事件中不支持input，用change代替

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) //因为返回的也是就jQuery对象，所以能方法连用（专业术语：链式调用）

②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)（“事件”，“儿子”，function）

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

！！！！！This指代的对象：看｛｝ //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)//停止动态改变属性的现象:比如动画 滑动(参数:都可选布尔值,第一个是否停止所有队列,第二个是否立即执行完所有效果)（默认都是false？？）