摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery提升实例</title> <style type="text/css">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery提升实例</title>
<style type="text/css">
a{color:red;}
#a{color:red;}
.b{width:50px;height:60px;border:1px solid #ccc;background:yellow;display:inline-block;}
.c{width:80px;height:80px;border:1px solid #ccc;}
.add{color:pink;}
.d{color:blue;}
.k{display:inline-block;}
.l{width:100px;height:100px;border:1px solid #ccc;background:yellow;}
.m{background:green;}
.db{width:100px;height:100px;border:1px solid #ccc;background:yellow;}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<body>
<script type="text/javascript">
$(document).ready(function(){
alert("a标签的颜色是："+$('a').css('color'))//获取a标签的颜色属性
$('#a').css('color','blue')//改变id=a的
$('.b').css({'width':'70px','background':'green'})
$('.c').addClass('add')//为c类的div添加add类属性
$('.d').removeClass('d')//移除d类的span标签大的d类属性
alert("id=e的span标签，name的值为："+$('#e').attr('name'))
$('#f').attr('name','good2')//修改id=f的name值为good2
alert("修改后的id=f的name值为："+$('#f').attr('name'))
$('button').click(function(){
$('.k').removeAttr('style')//删除k类的style属性
})
alert("div中是否有值为c的类："+$('div').hasClass('c'))//用hasClass来确认div中是否有c类
$('.h').click(function(){
$('.l').toggleClass('m')//用toggleClass来切换添加和删除m类属性
})
$('p').text('星期二')//修改p标签内的文字为星期二
$('b').html('<b style="font-size:25px;">星期三</b>')//修改b标签内容字体为25px
alert("类为kk的input框内的值是："+$('.kk').val())//返回input框value的值
$('.kk').val('非常好')//修改value值为非常好
$('.u').blur(function(){
$('.u').css('background','red')//失去焦点后u类的input框背景色变红
})
$('.u').focus(function(){
$('.u').css('background','blue')//获得焦点后u类的inpu框背景色为蓝色
})
// $('.u').change(function(){
// $('.u').css('background','pink')//当u类的input框的值发生变化时，背景颜色为粉红色
// })
$('.db').dblclick(function(){
$('.db').css('background','red')//双击变红色
})
})
</script>
<h3>jquery获取/操作css的方法</h3>
<a href="#">www</a><br>
字体变色：<span id="a">good</span><br>
div框变宽，变色：<div class="b"></div><br>
<h3>jquery操作属性的方法</h3>
<div class="c">内容1</div>
<span class="d">内容2</span><br>
<span id="e" name="good">你好</span><br>
<span id="f" name="good1">大家好</span><br>
<button class="g">点我删除后面的div框</button>
<div style="width:100px;height:30px;border:1px solid #ccc;background:red" class="k"></div><br>
点击按钮切换下面div框背景颜色：<button class="h">按钮1</button><br>
<div class="l"></div>
<h3>设置内容</h3>
重新设置下面的星期：<p>星期一</p><br>
设置下面的字号：<b>星期三</b><br>
<input type="text" class="kk" value="很好">
<h3>jquery的事件切换</h3>
<input type="text" class="u"><br>
双击下面的框，背景变色：<br>
<div class="db"></div>
</body>
</html>
批改老师：天蓬老师批改时间：2019-01-13 09:50:16
老师总结：jQuery最大的优势在于它的强大的选择器功能与dom操作, 你的这么代码,如果全部用原生实现,代码量至少增加一倍以上, 好好研究,好好学
