jQuery的html和css方法总结

html():返回被选元素的html内容。如果有多个被选元素，只对第一个元素有效。该方法对XML文档无效。返回值不包含被选元素的html标签。

html('<h1>标题</h1><p>内容</p>'):设置被选元素的html内容。如果有多个被选元素，对多个元素都有效。

html(function (index，oldHtml) {return '第'+index+'个的内容是:'+'<br>'+oldHtml；}):用回调函数来设置被选元素的html内容，支持两个参数:

index:当前元素的索引值，从0开始

oldHtml:当前元素在修改前的html内容

如果有多个被选元素，对多个元素都有效，例:

修改前的html结构:

<div class="demo">

　　<p><a href="#">我在第一个P里面</a></p>

　　<p><a href="#">我在第二个P里面</a></p>

</div>

js代码:

$('div.demo p').html(function (index，oldHtml) { return '我是段落'+'index+1'+':'+oldHtml；})；

修改后的html结构:

<div class="demo">

　　<p>我是段落1:<a href="#">我在第一个P里面</a></p>

　　<p>我是段落2:<a href="#">我在第二个P里面</a></p>

</div>

原生js：

修改HTML内容：document.getElementById("demo").innerHTML = "内容"；

查看HTML内容：alert(document.getElementById("demo").innerHTML)；

 

text():返回被选元素及其所有后代元素的文本组成的内容，被选元素及其后代元素的HTML标签都将被剥离出去，该方法对XML和HTML文档都有效。如果有多个被选元素，对多个元素都有效。

html()会识别HTML标签，而text()不会识别HTML标签，text()会把HTML标签转化成纯文本，text()对input无效，对textarea有效，当然给input和textarea赋值推荐用val() 

val():返回匹配的元素集合中的第一个表单元素的值，例:

<div id="colorRadio">
　　<input type="radio" name="color" id="rd1" value="Red" />Red
　　<input type="radio" name="color" id="rd2" value="Yello" />Yello
　　<input type="radio" name="color" id="rd3" value="Blue" checked/>Blue
</div>

$('#colorRadio input:radio').val()只会返回所有单选选项中第一个选项的值(返回Red)，要想返回选中的那个选项的值(Blue)得用$('#colorRadio input:radio:checked').val()

带属性选择器的写法:

$('#colorRadio input:radio[name="color"]:checked').val()

$('#colorRadio input[name="color"]:radio:checked').val()

$('#colorRadio input:radio:checked[name="color"]').val()

 

如果是复选框，如:

<div id="colorCheck">
　　<input type="checkbox" name="color" id="rd1" value="Red" checked />Red
　　<input type="checkbox" name="color" id="rd2" value="Yello" />Yello
　　<input type="checkbox" name="color" id="rd3" value="Blue" checked/>Blue
　　<input type="checkbox" name="color" id="rd4" value="Black" />Black
　　<input type="checkbox" name="color" id="rd5" value="White" checked/>White
　　<input type="checkbox" name="color" id="rd6" value="Gray" checked/>Gray
</div>

没选中任何值时返回undefined，同时选中多个值时$('#colorCheck input:checkbox:checked').val()只会返回第一个被选中的值，要全部返回就得使用each():

$('#colorCheck input:checkbox:checked').each( function () { console.log ( $(this).val() ) } )；返回Red Blue White Gray

return false会立即停止循环:

$('#colorCheck input:checkbox:checked').each( function () { if ($(this).val() == 'White') {return false；} console.log ( $(this).val() ) } )；返回Red Blue

return true和return都只停止当前循环，直接进入下个循环:

$('#colorCheck input:checkbox:checked').each( function () { if ($(this).val() == 'White') {return true；} console.log ( $(this).val() ) } )；返回Red Blue Gray

 

css():返回或设置被选元素的css属性。

返回被选元素集合中第一个元素的css属性:var k = $('div').css('width')；

返回被选元素集合中第一个元素的多个css属性:var k = $('div').css(['width'， 'height'])；返回值是Object，{width："200px"，height："200px"}

设置被选元素集合中每个元素的一个css属性:$('div').css('width'，'100px')；

 

设置被选元素集合中每个元素的多个css属性:$('div').css({'width' : '100px'，'height' : '100px'})；

　　CSS属性名是单词的时候加不加引号都可

　　如:$('div').css({'width' : '100px'，'height' : '100px'})；和$('div').css({width : '100px'，height : '100px'})；

　　CSS属性名写成驼峰形式时加不加引号都可

　　如:$('div').css({'width' : '100px'，'marginTop' : '100px'})；和$('div').css({'width' : '100px'，marginTop : '100px'})；

　　CSS属性名中有连字符时必须用引号括上

　　如:$('div').css({'width' : '100px'，'margin-top' : '100px'})；

 

设置多个css属性值:$('div').css('border'，'1px solid blue')；

 

设置一个带一个变量的css属性值:var k = 40；$('p').css('font-size'，k+'px')；

设置单个CSS属性时，不论什么情况，CSS属性名一直都要用引号括上

引号中的CSS属性名中不能有空格，也可以写成驼峰形式，如:$('p').css('fontSize'，k+'px')；

 

设置一个带多个变量的css属性值:

var k = '40px'；$('div').css('background-position'，k+' '+k)；注意！俩k之间的引号里有一个空格

设置多个带多个变量的css属性值:

var k = '40px'；$('div').css({'margin-top' : k，'background-position' : k+' '+k})；

 

addClass():向一个或多个被选元素添加一个或多个类。

向一个元素添加一个类:$('div').addClass('blue')；

向多个元素添加一个类:$('h1,h2,h3').addClass('blue')；

向一个元素添加多个类:$('div').addClass('big blue')；

向多个元素添加多个类:$('h1,h2,h3').addClass('big blue')；

 

removeClass():从一个或多个被选元素删除一个或多个类。语法和addClass相同。

 

toggleClass():对一个或多个被选元素进行添加/删除一个或多个类的切换操作。语法和addClass相同。

 

<div id="test" data-name="cnblogs"></div>

console.log($("#test").data("name"))；

当被选元素多时，只匹配第一个

 

给元素设置多个属性：$("#test").attr({"name": "shichuanzhi", "value": "xiaohaha"})；