jquery本身就是一个函数,在这个函数的内部又封装了很多的函数(也可以叫做函数库),这些函数内部的函数就是各种不同的方法这些方法在我们使用的过程中可以让工作更加方便。
在使用jquery之前必须把这个jquery库引入文档内部。
可以把jquery下载到本地,使的时候直接调用本地的jquer(可以在jquery管网下载)。
也可以使用网络地址,直接调用网络上的jquery(建议使用网络地址)
<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>
在jquery函数内部有这样的操作:$=jQuery;所以使用$()跟jQuery()的效果是一样的。通常使用$(),更简单。
$()方法:
$()传一个参数时获取传入参数的dom节点$("div")获取所有的div盒子,会得到一个类数组,里面装的是所有的div元素。
$()传两个参数时,第一个为要获取的元素对象,第二个参数为获取第一个元素的范围(在那个区域去找)。$('p','#div1')获取所有在id为div1的内部的p元素。代表范围不写默认就是document,就是在全文档下查找。
$()返回值是一个jq对象,同时是一个类数组。
attr()元素的html属性
获取:
$("#div1").attr("style")获取id为div1的样式属性值,如果有多个id为div1的元素则只返回第一个div1的style属性值,如果没有设置属性则返回undefined
设置:
$("#div1").attr("style","color:red");给所有id为div1的元素设置color属性为“red”
$("#div1").attr({"innerHtml":"123","style":"color:red"});也可以传一个对象进去设置多个属性。
获取和更改
传入一个回调函数:
$("p","#div1").attr("class",function(index,old){return new});
获取所有id为div1内部的p元素的class属性,在回调函数内部会遍历每一个class属性的index(div内第几个p元素)old(获取到的当前的class属性值)return new (返回一个新的class属性值),如果没有return则不作更改
$("div").attr("class",function(index,old){
return "div1"
})
这样就可以把所有的div元素的类名改为div1。
元素的样式css()
用法类似于att()只获取style内的样式属性
获取:
$(‘p’).css(‘background-color’)
$(‘div’).css(‘backgroundColor’)
设置:
$(‘p’).css(‘background-color’,’red’)//一个样式
$(‘p’).css({‘background-color’:’red’,’textColor’:’blue’})//一个或者多个,传对象
获取并设置:
$('p').css('font-size',function(index,old){
if(index>1){return 2*parseInt(old)}
else{return old}
})//第二个p元素以后的元素的字体放大2倍
$('p').css({'border':'1px solid red'})//设置复合样式
元素内容
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