====什么是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({ '200px'});//队列1
jq(".div").animate({ '2000px'});//队列2
jq(".div").animate({ '200px'});//队列3
})
5.停止属性改变
jq(".div").stop(bool,bool)//停止动态改变属性的现象:比如动画 滑动(参数:都可选布尔值,第一个是否停止所有队列,第二个是否立即执行完所有效果)