js与JQ区别

最新推荐文章于 2020-08-17 17:29:59 发布

qq_36594703

最新推荐文章于 2020-08-17 17:29:59 发布

阅读量633

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/qq_36594703/article/details/78299691

版权

jq 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript简单介绍
ECMAScript
1.语法
2.变量：只能使用var定义，如果在函数的内容使用var定义，那么他是一个局部变量，如果没有使用var定义他是一个全局变量，弱类型
3.数据类型：原是数据类型（undefined/null/string/number/boolean)
4.语句
5.运算符：==与===的区别
6.函数：两种写法（有名称的，匿名的）
BOM对象：
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数),back(),forward()
location:href属性
事件：
onsubmit()此事件写在form标签中，必须有返回值，οnsubmit=return checkForm()
onload()此事件只能写一次并且放到Body标签中，页面加载事件，所有的其他操作（匿名方式)都可以放到这个绑定的函数里面
其他事件放到需要操作的元素位置(onclick,onfocus,onblur)
onfocus,onblur:聚焦离焦事件，用于表单校验是的时候比较合适
onclick/ondblclick:鼠标单击和双击事件
onkeydown/onkeypress:搜索引擎使用较多
onmouseover/onmouseout/onmousemove:购物网站详情页
onchange:当用户改变输入内容的时候使用这个事件(二级联动)
获取元素：
document.getElementById("id")
获取元素的值：
document.getElementById("id").value;
向页面输出
弹窗：alert()
向浏览器中写入内容:document.write("内容")

向页面指定位置写入内容innerHTML

js与jq加载

<!DOCTYPE html>
<html>
<head>
	<title>获取元素</title>
	<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
	<script>
	window.οnlοad=function(){
		alert("张三");
	}
	//传统的方式页面加载会存在覆盖问题，加载比jq慢(整个页面加载完毕<包括里面的其他内容>)
	window.οnlοad=function(){
		alert("李四");
	}
	//jQuery的加载比js加载快(当整个dom树结构绘制完毕就会加载)
	jQuery(document).ready(function(){
		alert("老王");
	});
	//jq不存在覆盖问题，加载时顺序执行
	$(document).ready(function(){
		alert("王五");
	});
	$(function(){
		alert("汾酒");
	});
	</script>
</head>
<body>
</body>
</html>

JQ的获取

<!DOCTYPE html>
<html>
<head>
	<title>获取元素</title>
	<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
	<script>
		$(function(){
			//传统方式获取
			document.getElementById("btn").οnclick=function(){
				location.href="a.html";
			}
			//jq方式的获取
			$("#btn").click(function(){
				location.href="b.html";
			});
		});
	</script>
</head>
<body>
	<input type="button" value="点我有惊喜" id="btn"/>
</body>
</html>

DOM与jQ对象之间的转换关系

<!DOCTYPE html>
<html>
<head>
	<title>Dom与JQ对象之间的转换</title>
	<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
	<script>
		function write1(){
		//js的DOM操作
			document.getElementById("span1").innerHTML="萌萌哒";
			var spanEle=document.getElementById("span1");
			//将DOM对象转换为JQ对象
			$(spanEle).html("思密达");
		}
		$(function(){
			$("#btn").click(function(){
			//jq对象无法操作js里面的属性和方法！！！
				//$("#span1").innerHTML="呵呵哒";
			$("#span1").html("呵呵哒");
			//JQ对象想DOM对象转换
			$("#span1").get(0).innerHTML="美美哒";
			$("#span1")[0].innerHTML="棒棒哒";
			});
		});
	</script>
</head>
<body>
	<input type="button" value="js写入" οnclick="write1()"/>
	<input type="button" value="jq写入"id="btn"/><br/>
	班长：<span id="span1">你好帅</span>
</body>
</html>

1.引入JQ相关文件
2.书写页面加载函数
3.在页面加载函数中，获取显示广告图片的元素
4.设置定时操作（显示广告图片的函数）
5.在显示广告图片的函数中，使用JQ的方法让广告图片显示(show());
6.清除显示广告图片的定时操作
7.设置定时操作（隐藏广告图片的函数）
8.在隐藏广告图片的函数中，使用JQ的方法让广告图片隐藏(hide());
9.清除隐藏广告图片的定时操作

<script type="text/javascript" src="../jq/jquery-1.8.3.js"></script>
		<script>
			$(function(){
				//书写显示广告图片的定时操作
				time=setInterval("showAd()",3000);
			});
			//书写显示广告图片的函数
			function showAd(){
				//获取广告图片,并让其显示
				//$("#img2").show(1000);
				//$("#img2").slideDown(5000);
				$("#img2").fadeIn(4000);
				//清除显示图片定时操作
				clearInterval(time);
				//设置隐藏图片的定时操作
				time=setInterval("hiddenAd()",3000);
			}
			function hiddenAd(){
				//$("#img2").hide();
				//$("#img2").slideUp(5000);
				$("#img2").fadeOut(4000);
				//清除隐藏图片的定时操作
				clearInterval(time);
			}
		</script>

toggle元素

qq_36594703

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js与JQ区别

javascript简单介绍ECMAScript1.语法2.变量：只能使用var定义，如果在函数的内容使用var定义，那么他是一个局部变量，如果没有使用var定义他是一个全局变量，弱类型3.数据类型：原是数据类型（undefined/null/string/number/boolean)4.语句5.运算符：==与===的区别6.函数：两种写法（有名称的，匿名的）BO
复制链接

扫一扫

专栏目录