初识JQuery——2018年4月2日

1、如何利用Jquery实现css属性设置

2、在元素后插入html元素【inserAfter】

3、选择器写法

4、JQuery的加载方式：本地加载、cdn加载

5、浏览器兼容问题

6、如何在head头部进行加载处理，以保证页面dom加载完后正常实现效果。

效果图

QQ截图20180402233732.jpg

实例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<!--<script src="../js/jquery.js"></script>-->
<!--<script type="text/javascript">

$(document).ready(function(){
	$(".caipiao").css({"width":"100%","height":"200px","background-color":"#898989","border":"1px solid red","text-align":"center"})
$("span:even").css({"color":"white","display":"inline-block","width":"30px","height":"30px","background-color":"red","line-height":"30px","border-radius":"50%"})
$("button").css({"width":"50px","height":"30px","background-color":"#e91e63","border":"none","border-radius":"3px"})
$("button#sc").click(function(){
	var num1 = Math.floor(Math.random()*9+1 )
	var num2= Math.floor(Math.random()*9+1 )
	var num3= Math.floor(Math.random()*9+1 )
	var result=Math.floor(num1+num2+num3)
	$("span.num1").html(num1)
	$("span.num2").html(num2)
	$("span.num3").html(num3)
	$("span.result").html(result)
})
})
</script>-->
<style type="text/css">

</style>
<script type="text/javascript">
	$(function(){
		$(".caipiao").css({"width":"400px","height":"120px","background-color":"#efaaaa","border":"1px solid red","text-align":"center","margin":"auto"})
$("span:even").css({"color":"white","display":"inline-block","width":"30px","height":"30px","background-color":"red","line-height":"30px","border-radius":"50%"})
$("button").css({"width":"50px","height":"30px","background-color":"#e91e63","border":"none","border-radius":"3px","color":"#fff"})

$("button#sc").click(function(){
	var num1 = Math.floor(Math.random()*9+1 )
	var num2= Math.floor(Math.random()*9+1 )
	var num3= Math.floor(Math.random()*9+1 )
	var result=Math.floor(num1+num2+num3)
	$("span.num1").html(num1)
	$("span.num2").html(num2)
	$("span.num3").html(num3)
	$("span.result").html(result)
})
	})
</script>



</head>
<body>
	<div class="caipiao">
			<h3>随机彩色球</h3>
		<span class="num1">1</span>
		<span class="add">+</span>
		<span class="num2">1</span>
		<span class="add">+</span>
		<span class="num3">1</span>
		<span class="all">=</span>
		<span class="result">2</span>
		<button id="sc">生成</button>
	</div>



</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：初次认识jQuery，和原生JS相比较而言，写法确实简单很多。以前总觉得很难，也可能今天老师只是稍微讲解了一下，没有涉及到难的地方。但是至少比原来有动力了，比原生的简便好多。

实例

相关文章