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？？）