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中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
jQuery事件详解
Feb 23 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
JavaScript获取页面元素的常用方法详解
Sep 28 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
PHP学习之PHP表达式
2006/10/09 PHP
php microtime获取浮点的时间戳
2010/02/21 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
javascript 动态添加表格行
2006/06/22 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python字符串处理之count()方法的使用
2015/05/18 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Python 、Pycharm、Anaconda三者的区别与联系、安装过程及注意事项
2019/10/11 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
服务型党组织建设典型材料
2014/05/07 职场文书
会议开幕词
2015/01/28 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
MySQL中连接查询和子查询的问题
2021/09/04 MySQL
Moment的feature导致线上bug解决分析
2022/09/23 Javascript