jquery day1

1、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>

2、命名

var div1=jQuery(‘div’)//得到所有div标签

var div2=$(‘div’)//得到所有div标签

自定义名字:

var hq = $.noConflict()

var div3=hq(‘div’)//得到所有div标签

3、查询

$(‘#div1’) //所有id为div1的元素.

$(document) //所有document   其实只有一个

$('p','#div2') //所有id为div2下的p元素

4、$()方法的返回值

$()返回的是一个jq对象,jq对象是一个类数组,跟querySelecterAll()方法返回的nodelist类似

比如:

$(‘div’)返回值是一个装有所有(大于等于0)div标签的类数组。

 $(document)返回值是一个装有当前doucument对象的类数组

5、 attr

$(".bt").attr({'value':'123','style':'background:red'})

$(".bt").attr('style','background:red') //按照键值对更改,类数组中所有的元素都更改

更改：

$(".bt").attr("属性",function(index,oldValue){

return newValue

})

6、 css

var jq= $.noConflict()

var obj=jq('div')

var bg=obj.css("backgroundColor")

console.log(bg) //获取类数组中的第一个div的backgroundColor

//如果传入一个参数，获取这个类数组中的第一个div的参数对应的value

$(‘p’).css(‘background-color’,’red’) //类数组中所有p标签改为红色 ，一个样式，可以不用传对象

$(‘p’).css({ ‘background-color’:’red’ , ’textColor’:’blue’ })//一个或者多个,传对象

//如果传入的这个参数按照key-value形式来设置(setter)，返回值是当前的jq对象

7、 val()

$(‘input’).val() //获取第一个input的value值

$(‘input’).val(1) //把所有input的value值设为1

更改：

$('input').val(function(index,old){

       if(index>0){return 10}

       else{return 100}

       }) //第一个input的value值设为100,其他设为10

8、 html()

<p>111<div>xxx</div><p>

<p>222</p>

var jq=$.noConflict()

var p1=jq('p')

var ht=p1.html()

console.log(ht)

//111 获取类数组中的第一个HTML内容，不包括其他元素

$('p').html("<h1>xxx</h1>")

//XXX h1标签会做翻译

更改：

var p1=jq('p').html(function(index,old){

return "xxx"

}

//所有p标签内容改为xxx

9、 text()

<div>xx<p>111</p>xx</div>

<div>222</div>

var text1=$('div').text()

console.log(text1)

//xx111xx222 获取类数组中所有元素的纯文本内容，不只是第一个

$('div').text("<h1>xxx</h1>")

//<h1>xxx</h1> h1标签不做翻译，会展示出来，当做字符串打印

更改：

var p1=jq('p').text(function(index,old){

return "xxx"

}

10、补充：

<p contenteditable="true" value="" name=""></p>

//可作输入框，自动打开用户交互