jQuery基本介绍

1.jQuery简单入门

jQuery是一个丰富的JavaScript库,库中封装了js中的一些常用方法
作用:wirte less,do more

开发步骤

  • 导入js库
  • js对象转换成jQuery对象
    var jsDiv = document.getElementById("id01"); $(jsDiv)
  • 可以通过jQuery对象调用一些方法
<html>
	<head>
		<meta charset="UTF-8">
		<title>01_jQuery</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			function init(){
   
				alert("页面载入触发事件");
			}
			//方式1
			jQuery(document).ready(function(){
   
				alert("jq的页面载入事件111");
			});
			//方式2
			$(document).ready(function(){
   
				alert("jq的页面载入事件222");
			});
			//方式3
			$(function(){
   
				alert("jq的页面载入事件333");
			});
		</script>
	</head>
	<body onload="init()">
	</body>
</html>

2.jq对象和js对象的相互转化

<html>
	<head>
		<meta charset="UTF-8">
		<title>jq对象和js对象相互转化</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			/*js方式修改div的内容
			 * 1.点击事件
			 * 	- 获取要操作的那个元素对象
			 * 	- 设置该元素对象的innerHTML属性
			 */
			function jsChange(){
   
				var div = document.getElementById("div1");
				//div.innerHTML = "使用js方式修改了div内容";
				//将div对象(js对象)--->jquery对象
				$(div).html("js对象转换成jq对象改变div内容方式");
			}
			/*jquery方式修改div的内容
			 1.导入js库
			 2.页面载入事件$(function(){...});
			 3.点击事件$("选择器").click(function(){...});
			 	- 确定元素对象$(#div1).html("内容")*/
			$(function(){
   
 				$("#btn1").
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值