SOURCE

/** 用id 获取所选元素的内容 **/
$(function(){
var txt = $('#txt').html();
console.log(txt)

/** 用类名获取所选元素的内容 **/
var txt1 = $('.txt1').html();
console.log(txt1)


/** text()与html()的区别 **/
//返回或设置被选元素的内容 (等同于js的innerHTML)，包括标签
console.log($('.cont').html())
//只返回被选元素的文本内容
console.log($('.cont').text())


/** 获取输入框的值 **/

//① 用val() 获取输入框的值 
var name = $('#name').val()
console.log(name)
//②点击事件获取输入框的值
$('#submit').click(function(){
    alert("输入框的值为："+$('#name').val())
})
//③当输入框失去焦点时 获取输入框的值 用blur()事件处理
$('#name').blur(function(){
    console.log('输入结束:'+$('#name').val())
})
$('#name').focus(function(){//当输入框获取焦点时
    console.log('正在输入中')
})

/** 获取属性值 更改属性值**/
var width = $('.attr').attr("width")
console.log('37----'+width)
// 测试css
var css = $('.attr').css("background-color")
console.log('40----'+css)
$('.attr').click(function(){
    console.log('42----'+'click事件')
    if ($('.attr').css("background-color") == 'rgb(255, 255, 255)'){
        $('.attr').css("background-color","#333333")
    }else{
        $('.attr').css("background-color","#ffffff")
    }
})

})
function updateColor(){
    console.log('52----'+'onClick事件')
    if ($('.attr').css("background-color") == 'rgb(255, 255, 255)'){
        $('.attr').css("background-color","#333333")
    }else{
        $('.attr').css("background-color","#ffffff")
    }
}

<!-- 获取元素 -->
<p>text() - 设置或返回所选元素的文本内容(等同于js的innerText)</p>
<p>html() - 设置或返回被选元素的内容 (等同于js的innerHTML)，包括标签</p>
<p>val() - 设置或返回表单字段的值</p>
<hr>
<p id="txt">用id获取所选元素的内容</p>
<p class="txt1">用类名获取所选元素的内容</p>

<h4>text()与html()的区别</h4>
<div class="cont">
    <p>内容</p><span>内容下的span标签</span>
</div>
<hr>
<p>获取输入框的值</p>
<input type="text" value="获取输入框的值" id="name">
<input type="submit" value="提交" id="submit">
<hr>
<h3>关键点：jQuery不能用attr()直接获取样式属性值 需要用css()</h3>
<div class="attr" onclick="updateColor()">获取元素属性值 动态更改元素属性</div>

.attr{
    width: 100px;
    background-color: #ffffff;
}