JavaScript与JQuery框架基础入门教程


Posted in Javascript onJuly 15, 2021
目录
  • 一,JS对象
  • 二,DOM
    • ?1,作用
    • ?2,测试
  • 三,Jquery
    • ?1,概述
    • ?2,使用步骤
    • ?3,入门案例
    • ?4,jQuery的文档就绪
  • 四,JQuery的语法
    • ?1,选择器
    • ?2,常用函数
    • ?3,常用事件
    • ?4,练习
  • 总结

 

一,JS对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的创建对象</title>
		<script>
			//2. 创建对象方式2:
				var p2 = {
					//绑定了属性
					name:"张三",
					age:19,
					//绑定了函数
					eat:function(a){
						console.log(a);
					}
				}
				console.log(p2);
				p2.eat(10);//调用函数
			//1. 创建对象方式1:
				//声明对象
				function Person(){}
				//创建对象
				var p = new Person();
				//动态绑定属性
				p.name="张三" ;
				p.age=18 ;
				//动态绑定函数
				p.eat=function(){
					console.log("吃猪肉");
				}
				//查看
				console.log(p);
				//调用函数
				p.eat();
		</script>
	</head>
	<body>
	</body>
</html>

 

二,DOM

 

?1,作用

使用document对象的各种方法属性。解析网页里的各种元素。

按照id获取元素-----getElementById(“id属性的值”)

按照name获取元素-----getElementsByName(“name属性的值”)

按照class获取元素-----getElementsByClassName(“class属性的值”)

按照标签名获取元素-----getElementsByTagName(“标签名”)

在浏览器输出-----write(“要展示的内容”)

innerHtml

innerText

style

 

?2,测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 DOM解析网页元素</title>
		<script>
			function method(){
				// 4. 获取标签名是p的
				var d = document.getElementsByTagName("p");
				d[0].innerHTML="hi...";
				console.log(d[0].innerHTML);
				// 3. 获取 class="f"
				var c = document.getElementsByClassName("f");
				c[0].innerHTML="hi...";
				console.log(c[0].innerHTML);
				// 2. 获取name="d"
				var b = document.getElementsByName("d");//得到多个元素
				// b[0].innerHTML="test...";  //修改第一个元素的内容
				b[0].style.color="blue";  //修改第一个元素的字的颜色
				console.log(b[0].innerHTML);//获取第一个元素的内容
				// 1. 获取id="a1"
				var a = window.document.getElementById("a1");//得到一个元素
				// a.innerText = "<h1>hello</h1>" ; //修改内容
				// document.write( a.innerText ); //直接向网页写出数据
				// //innerText和innerHtml的区别?innerHtml能解析HTML标签
				// a.innerHtml = "<h1>hello</h1>" ; //修改内容
				// document.write( a.innerHtml ); //直接向网页写出数据
			}
		</script>
	</head>
	<body>
		<div name="d" onclick="method();">我是div1</div>
		<div name="d">我是div2</div>
		<div class="f">我是div3</div>
		<a href="#" id="a1">我是a1</a>
		<a href="#" class="f">我是a2</a>
		<p class="f">我是p1</p>
		<p>我是p2</p>
	</body>
</html>

 

三,Jquery

 

?1,概述

用来简化JS的写法,综合使用了HTML css js

语法: $(选择器).事件

 

?2,使用步骤

先引入jQuery的文件: 在HTML里使用script标签引入

使用jQuery的语法修饰网页的元素

 

?3,入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 jq语法</title>
		<!-- 1. 引入jQuery文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. 在网页中嵌入JS代码 -->
		<script>
			// 点击p标签,修改文字
				function fun(){
					//dom获取元素
					var a = document.getElementsByTagName("p");//按照标签名获取元素
					a[0].innerHTML="我变了。。。";//修改文字
					//jq获取元素 -- jq语法:  $(选择器).事件
					$("p").hide();//隐藏元素
					$("p").text("我变了33333。。。");//修改文字
				}
		</script>
	</head>
	<body>
		<p onclick="fun();">你是p2</p>
	</body>
</html>

 

?4,jQuery的文档就绪

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 jq的文档就绪</title>
		<!-- 1. 导入jq文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<script>
			//写法1的问题:想用的h1还没被加载,用时会报错
					// 解决方案:写在h1加载之后 + 使用文档就绪函数(先导入jq)
			// document.getElementsByTagName("h1")[0].innerHTML="我变了。。";
			//写法2的:使用文档就绪函数(先导入jq)--是指文档都就绪了再用元素
			$(document).ready(function(){
				//document.getElementsByTagName("h1")[0].innerHTML="我变了。。";//js的dom写法
				$("h1").text("我变了。。");//jq的写法
			});
		</script>
	</head>
	<body>
		<h1>我是h1</h1>
	</body>
</html>

 

四,JQuery的语法

 

?1,选择器

标签名选择器: $(“div”) ? 选中div

id选择器: $("#d1") ? 选中id=d1的元素

class选择器: $(".cls") ? 选中class=cls的元素

属性选择器: $("[href]") ? 选中有href属性的元素

高级选择器: $(“div.d3”) ? 选中class=d3的div

 

?2,常用函数

text() html() val() — 获取或者设置值

hide() ? 隐藏

$(“p”).css(“background-color”,“yellow”); --设置样式

show()—显示

fadeIn() — 淡入

fadeOut() — 淡出

 

?3,常用事件

单击事件?click !!!

双击事件?dblclick

鼠标移入事件?mouseenter

鼠标移出事件?mousleave

鼠标悬停事件?hover

键盘事件?keydown keyup keypress

 

?4,练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 jq的练习</title>
		<!-- 1. 引入jq -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 2. 使用jq语法做练习 语法:$(选择器).事件 -->
		<script>
			// jq文档就绪函数::保证元素都被加载过了,就可以放心使用了,不然会报错
			$(function(){
				// 练习1:单击id=d1的元素,隐藏id=p1的
				$("#d1").click(function(){
					$("#p1").hide();
				})
			});
			$(function(){
				// 练习2:双击class="dd"的元素,给div加背景色
				$(".dd").dblclick(function(){
					$("div").css("background-color","green");
				})
				// 练习3:鼠标进入 id="d1"的div,隐藏有href属性的元素
				$("#d1").mouseenter(function(){
					$("[href]").hide();
				})
			});
		</script>
	</head>
	<body>
		<div id="d1">我是div1</div>
		<div class="dd">我是div2</div>
		<div>我是div3</div>
		<div class="dd">我是div4</div>
		<p id="p1">我是p1</p>
		<p>我是p2</p>
		<a class="dd">我是a1</a>
		<a href="#">我是a2</a>
		<a href="#">我是a3</a>
	</body>
</html>

 

总结

本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
javascript 获取图片颜色
Apr 05 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
JS 动态判断PC和手机浏览器实现代码
Sep 21 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
学习Vue组件实例
Apr 28 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
Python机器学习之决策树和随机森林
微信小程序scroll-view不能左右滑动问题的解决方法
Vue Element-ui表单校验规则实现
Jul 09 #Vue.js
JavaScript数组reduce()方法的语法与实例解析
Jul 07 #Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 #Vue.js
Vue项目打包、合并及压缩优化网页响应速度
教你使用vscode 搭建react-native开发环境
You might like
生成sessionid和随机密码的例子
2006/10/09 PHP
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
PHP里的中文变量说明
2011/07/23 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php根据身份证号码计算年龄的实例代码
2014/01/18 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python字符串和常用数据结构知识总结
2019/05/21 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
台湾全方位线上课程与职能学习平台:TibaMe
2019/12/04 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
机电专业毕业生求职信
2013/10/27 职场文书
给客户的道歉信
2014/01/13 职场文书
收银员岗位职责
2014/02/07 职场文书
情况说明书格式范文
2014/05/06 职场文书
房产协议书范本2014
2014/09/30 职场文书