什么是jquery
1.Jquery是一个js函数库,又常常被叫做jq,里面代码很多,但是用的时候代码很少,是目前js的主流框架
2.使用JQ就可以做出我们前面做过的所有效果,那为何还要学习js? Js是语言基础,jq是js的代码库的封装,比如在jq中我们不可能看到基本数据类型有哪些,因为js有哪些jq中使用得就是这些,不管js还是jq,都是我们做项目使用得工具而已,要做出漂亮并且高性能的界面.
什么是jquery
1.Jquery是一个js函数库,又常常被叫做jq,里面代码很多,但是用的时候代码很少,是目前js的主流框架
2.使用JQ就可以做出我们前面做过的所有效果,那为何还要学习js? Js是语言基础,jq是js的代码库的封装,比如在jq中我们不可能看到基本数据类型有哪些,因为js有哪些jq中使用得就是这些,不管js还是jq,都是我们做项目使用得工具而已,要做出漂亮并且高性能的界面.
引入地址方式
然后在代码里面引入后就可以用了<script src="文件路径"><script/>
CDN(内容分发网络)
不下载也可以通过 CDN:内容分发网络引用(就是有的网站服务器存的有jqruery库,填好CDN地址直接让用户把它加载到浏览器缓存以后随时就可以使用了)
百度:搜索百度CDN,然后找到需要的库引入
<scriptsrc="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<scriptsrc="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()
vardiv3=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属性为"#div2p"
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){returnnewValue})
//回调函数:第一个参数是属性,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{returnold}
})//第二个p元素以后的元素的字体放大2倍
元素内容
val()
获取:类数组第一个元素的value值
$(‘input’).val()//获取第一个input的value值
设置:设置所有元素的value值(参数为值或者函数)
$(‘input’).val(1)//把所有input的value值设为1
$('input').val(function(index,old){
if(index>0){return10}
else{return100}
})//第一个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