jQuery——捕获
- 获得内容 - text()、html()、val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
text() 和 html() 获得内容:
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
$(function() {
$('#btn1').click(function(){
alert('Text:' + $('#test').text())
})
$('#btn2').click(function(){
alert('HTML:' + $('#test').html())
})
})
val() 获得输入字段的值: 你好 世界
名称：<input type="text" id="test" value="你好 世界">
<button id="btn">显示值</button>
$(function() {
$('#btn').click(function(){
alert('Text:' + $('#test').val())
})
})
- 获取属性 arr()：用于获取属性值。
<a href="http://baidu.com">百度</a><hr/>
<button id="btn">显示 href 属性的值</button>
$(function() {
$('#btn').click(function(){
alert( $('a').attr("href"))
})
})
jQuery——设置
- 设置 -text()、html()、val()
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
点击按钮，值发生变化：Hello World!
<p id="test1">这是一个段落</p>
<p id="test2">这是另一个段落</p>
<p>输入框：<input type="text" id="test3" value='web前端'></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
$(function(){
$('#btn1').click(function(){
$('#test1').text('Hello World!')
})
$('#btn2').click(function(){
$('#test2').html('<b>Hello World!</b>')
})
$('#btn3').click(function(){
$('#test3').val('Hello World!')
})
})
- text()、html()、val() 的回调函数
<p id='test'>这是一个有<b>粗体</b>字的段落</p>
<button id='btn'>显示 新/旧文本</button>
<script>
$(function(){
$('#btn').click(function(){
$('#test').text(function(i,origText){
return '旧文本：' + origText + '新文本：Hello World! (index:' + i + ')'
})
})
})
</script>
- 设置属性 -attr()：也用于设置 / 改变属性值。
点击链接，跳转到新地址：
<a href="http://www.baidu.com">百度</a>
<script>
$(function(){
$('a').click(function(){
$(this).attr('href','http://www.runoob.com/jquery')
})
})
</script>
点击按钮，修改链接和链接文字：
<p><a href="http://www.baidu.com" id="runoob">菜鸟教程</a></p>
<button>修改 href 和 title</button>
<script>
$(function(){
$('button').click(function(){
$('#runoob').attr({
"href":"http://www.runoob.com/jquery",
"title" : "jQuery 教程"
})
title = $("#runoob").attr('title')
$('#runoob').html(title)
})
})
</script>
4.attr() 的回调函数：
回调函数有两个参数：
- 被选元素列表中当前元素的下标，以及原始（旧的）值。
- 然后以函数新值返回希望使用的字符串。
使用 attr 的回调到新的地址：
<a href="http://www.runoob.com">菜鸟教程</a>
<script>
$(function(){
$('a').click(function(){
$(this).attr('href',function(){
return origValue + '/jQuery'
})
})
})
</script>
jQuery——添加元素
- append() 方法：再被选元素的结尾插入内容（仍然在该元素的内部）
点击按钮，添加新列表项
<ol>
<li>List 1</li>
<li>List 2</li>
</ol>
<button>添加列表项</button>
<script>
$(function(){
$('button').click(function(){
$('ol').append('<li>追加列表项</li>')
})
})
</script>
- prepend() 方法：在被选元素的开头插入内容。
点击按钮，添加新列表项
<ol>
<li>List 1</li>
<li>List 2</li>
</ol>
<button>添加列表项</button>
<script>
$(function(){
$('button').click(function(){
$('ol').prepend('<li>追加列表项</li>')
})
})
</script>
- after()：在被选元素之后插入内容。
- before()：在被选元素之前出入内容。
点击按钮，在文本之前 / 之后 添加文本：
<div>你好</div>
<button>xx你好</button><hr>
<div>你好</div>
<button>你好xx</button>
<script>
$(function(){
$('button').eq(0).click(function(){
$('div').eq(0).before('小明')
})
$('button').eq(1).click(function(){
$('div').eq(1).after('小爱')
})
})
</script>
jQuery——删除元素
- remove()：删除被选元素（及其子元素）
点击按钮，移出div元素：
<div>
<p>这是div的文本</p>
<p>这是div的另一个文本</p>
</div>
<button>移出div元素</button>
<script>
$(function(){
$('button').click(function(){
$('div').remove()
})
})
</script>
- empty()：删除被选元素的子元素。
点击按钮，删除 div 里面的 p：
<div>
<p>这是div的文本</p>
<p>这是div的另一个文本</p>
</div>
<button>移出div元素</button>
<script>
$(function(){
$('button').click(function(){
$('div').empty()
})
})
</script>
- remove()：该方法也可以接受一个参数，允许对被删除元素进行过滤。该参数可以是任何 jQuery 选择器的语法。
删除 class = ‘italic’ 的所有 p元素：
<p class="italic">class="italic"的段落</p>
<p>class!="italic"的段落</p>
<p>class!="italic"的段落</p>
<button>移出italic段落</button>
<script>
$(function(){
$('button').click(function(){
$('p').remove(".italic")
})
})
</script>
jQuery——css类
- addClass()：想被选元素添加一个或多个类
//css
.red {
color:red;
}
//html
<p>Hello-前端开发人员</p>
<h3>HELLO</h3>
<button>添加 class 属性</button>
<script>
$(function(){
$('button').click(function(){
$('p,h3').addClass("red")
})
})
</script>
- removeClass()：删除指定的 class 属性
$('button').click(function(){
$('p,h3').removeClass("red")
})
- 切换：添加 / 删除类的切换操作
$("button").click(function(){
$("p,h3").toggleClass("red");
})
jQuery css() 方法
- 返回 css 属性：
css("propertyname");
<p style='background-color:#ff36ea'>这是一个段落</p>
<button>返回段落的颜色</button>
<script>
$(function(){
$('button').click(function(){
alert('背景颜色 = ' + $('p').css('background-color'))
})
})
</script>
- 设置 css 属性：
css("propertyname","value");
<p>这是一个段落</p>
<button>设置段落的颜色</button>
<script>
$(function(){
$('button').click(function(){
$('p').css('background-color','yellow')
})
})
</script>
- 设置多个 css 属性：
css({"propertyname":"value","propertyname":"value",...});
$('button').click(function(){
$('p').css({
'background-color':'yellow',
'font-size': 25
})
})
不积跬步无以至千里 不积小流无以成江海