jQuery基础语法

$() , 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