$() , jQuery(),自定义名字
jq函数库中定义了一个全局函数:jQuery(),这个函数的使用是最多的,因此,为了方便,还给它定义了一个快捷名:$
eg:
var div1=jQuery(‘div’)//得到所有div标签
var div2=$(‘div’)//得到所有div标签
自定义名字:
var hq = $.noConflict()
var div3=hq(‘div’)//得到所有div标签
$()查询
1.$()方法有两个参数:
1)第一个参数可以是选择器,可以是对象:
eg:
$(‘#div1’)//所有id为div1的元素.
$(document) //所有document 其实只有一个
2)第二个参数是可选的,代表范围不写默认就是document,就是在全文档下查找
eg:
$('p','#div2')//所有id为div2下的p元素
2.$()方法的返回值
$()返回的是一个jq对象,jq对象是一个类数组,跟querySelecterAll()方法返回的nodelist类似
eg:
$(‘div’)返回值是一个装有所有(大于等于0)div标签的类数组.
$(document)返回值是一个装有当前doucument对象的类数组
代码演示:
//查询obj的 css 的样式
// 1. 如果传入一个参数,只能获取到obj这个类数组的中的第一个的这一个参数对应的value
obj.css(
"color");
//设置obj数组的每一个div的样式
//2.如果传入的是两个参数,按照key-value形式来设置,返回值是当前的jq对象
var
bg =
obj.css(
"color",
"red");
console.
log(
bg);
//index---obj中的每一个下标 old----obj中每一个对应的旧的backgroundColor属性
var
bg =
obj.css(
"backgroundColor",
function (index,old) {
console.
log(
this);
return
"yellow";
})
jq对象
1.属性:$()方法返回的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
2.方法:$()方法返回的jq对象的方法有许多,我们主要就是学习这些方法
案例---隔行换色:
<
script
>
var
jq = $.noConflict();
var
lis =
jq(
"li");
var
ul =
jq(
"ul");
ul.css(
"listStyle",
"none");
lis.css(
"backgroundColor",
function (index,old) {
var
r =
Math.
round(
Math.
random()*
255);
var
g =
Math.
round(
Math.
random()*
255);
var
b =
Math.
round(
Math.
random()*
255);
if(index%
2==
0){
return
"rgb("+
r+
","+
g+
","+
b+
")";
}
else {
return
"yellow";
}
//this指代的此时第index个li标签 是一个dom节点,dom对象
this.
onclick =
function () {
console.
log(
6666);
}
});
lis.css(
"fontSize",
function (index,old) {
if (index%
2==
0){
return
"10px";
}
else {
return
"20px";
}
});
</
script
>
元素属性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代表新值
eg:
$('p','#div2').attr('style',function(index,oldValue){
console.log(oldValue)
if(index==0){
return 'background-color:red'
}else{return 'background-color:yellow'}
})
TIPs:
//用atr设置样式,以前的样式会被清除
jq(
'#div4').attr(
'style',
"color: blue;width: 400px ;background-color: red" );
元素的样式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倍
元素内容
1.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
TIPs:
<
script
>
//val()获取dom标签的value值 并且只取re中的第一个
// var re= jq("input").val();
$(
"button").
click(
function () {
//$('input')是jquery对象 可以调用jQuery方法
var
re = $(
"input").val();
//$('input')[0]是dom对象 只能调用value
var
re1 = $(
'input').
value;
//console.log(re);
})
</
script
>
2.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>标签的功能解
3.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