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 相关文章推荐
javascript 密码强弱度检测万能插件
Feb 25 Javascript
jquery监控数据是否变化(修正版)
Apr 12 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
jQuery不使用插件及swf实现无刷新文件上传
Dec 08 Javascript
JS实现的表格行上下移动操作示例
Aug 03 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 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
ftp类(example.php)
2006/10/09 PHP
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
js学习总结_选项卡封装(实例讲解)
2017/07/13 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
详解Vue源码之数据的代理访问
2018/12/11 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
python传递参数方式小结
2015/04/17 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python实现Dijkstra算法
2018/10/17 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python如何实现转换URL详解
2019/07/02 Python
python编写微信公众号首图思路详解
2019/12/13 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
创建索引时需要注意的事项
2013/05/13 面试题
金融专业个人的自我评价
2013/10/18 职场文书
中学生自我评价范文
2015/03/03 职场文书
九年级英语教学反思
2016/02/15 职场文书
python数字类型和占位符详情
2022/03/13 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技