jQuery(1)__jQuery基础<对象,元素,属性>

什么是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