jquery提升实例_php.cn手记

abstract：<!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>

Correcting teacher：天蓬老师Correction time：2019-01-13 09:50:16
Teacher's summary：jQuery最大的优势在于它的强大的选择器功能与dom操作, 你的这么代码,如果全部用原生实现,代码量至少增加一倍以上, 好好研究,好好学

jquery提升实例

Popular Entries