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的日期选择控件
Oct 27 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
深入理解Vue 组件之间传值
Aug 16 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 Javascript
js不常见操作运算符总结
Nov 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
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
初识laravel5
2015/03/02 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
laravel添加前台跳转成功页面示例
2019/10/22 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
js二级地域选择的实现方法
2013/06/17 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
JavaScript获取当前日期是星期几的方法
2015/04/06 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
javascript事件模型介绍
2016/05/31 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
2016/06/12 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
2009/04/02 HTML / CSS
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
银行优秀员工事迹
2014/02/06 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
三年级学生评语
2014/04/23 职场文书
关于诚信的活动方案
2014/08/18 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
GPU服务器的多用户配置方法
2022/07/07 Servers