.attr(属性) 读取属性值
- // 读取第一个div的title属性
- console.log($('div:first').attr('title'));
.attr(属性 ,属性值) 设置属性
- // 给所有div设置name属性 value = xxx
- $('div').attr('name','xxx');
移除属性removeAttr(属性)
- // 给所有div移除title属性
- $('div').removeAttr('title')
.attr(属性 ,属性值)会进行覆盖 所以使用
- // 给所有div添加class == 'xxx'
- $('div').attr('class', 'xxx');
addClass再次添加class 就可以多次添加
- // 给所有div添加class == 'yyy'
- $('div').addClass('yyy');
removeClass移除类
- // 移除所有div的xxx的class
- $('div').removeClass('xxx');
html() 获取标签体文本
- // 得到最后一个li标签体文本
- console.log($('ul>li:last').html())
html()社设置标签体文本
- // 设置第一个li的标签体为 "
dddd
" - $('ul>li:first').html("
dddd
")
val()得到value的值
console.log($(':text').val())
- // 得到输入框中的value值
- console.log($('input[type=text]').val())
设置value的值
- // 将输入框的值设置为'你好'
- $(':text').val('你好')
attr专门操作属性值为非布尔值的属性
prop:专门操作属性值为布尔值的属性
- // 点击全选实现全选
- var $checkbox=$(':checkbox');//表单选择器
- $('button:first').click(function(){
- //$checkbox.attr("checked",true);
- $checkbox.prop("checked",true)
- }
- )
- $('button:last').click(function(){
- //$checkbox.attr("checked",false)
- $checkbox.prop("checked",false)
- }
- )
- <div id="div1" class="box" title="one">class为box的div1div>
- <div id="div2" class="box" title="two">class为box的div2div>
- <div id="div3">div3div>
- <span class="box">class为box的spanspan>
- <ul>
- <li>AAAAAli>
- <li title="hello" class="box2">BBBBBli>
- <li class="box2">CCCCCli>
- <li title="hello">DDDDDli>
- <li title="two"><span>BBBBBspan>li>
- ul>
- <input type="text" name="username" value="xx">
- <br>
- <input type="checkbox">
- <input type="checkbox">
- <br>
- <button>选中button>
- <button>不选中button>
- // 读取第一个div的title属性
- console.log($('div:first').attr('title'));
- // 给所有div设置name属性 value = xxx
- $('div').attr('name', 'xxx');
- // 给所有div移除title属性
- $('div').removeAttr('title')
- // 给所有div添加class == 'xxx'
- $('div').attr('class', 'xxx');
- // 给所有div添加class == 'yyy'
- $('div').addClass('yyy');
- // 移除所有div的xxx的class
- $('div').removeClass('xxx');
- // 得到最后一个li标签体文本
- console.log($('ul>li:last').html())
- // 设置第一个li的标签体为 "
dddd
" - $('ul>li:first').html("
dddd
") - // 得到输入框中的value值
- console.log($(':text').val())
- // 将输入框的值设置为'你好'
- $(':text').val('你好')
- // 点击全选实现全选
- var $checkbox=$(':checkbox');//表单选择器
- $('button:first').click(function(){
- //$checkbox.attr("checked",true);
- $checkbox.prop("checked",true)
- }
- )
- $('button:last').click(function(){
- //$checkbox.attr("checked",false)
- $checkbox.prop("checked",false)
- }
- )