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 解析读取XML文档 实例代码
Jul 07 Javascript
IE6不能修改NAME问题的解决方法
Sep 03 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
微信小程序文章详情页跳转案例详解
Jul 09 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 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获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP微信支付开发实例
2016/06/22 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
通过修改referer下载文件的方法
2008/05/11 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
ES6学习教程之块级作用域详解
2017/10/09 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
python远程登录代码
2008/04/29 Python
Python二分法搜索算法实例分析
2015/05/11 Python
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python遍历numpy数组的实例
2018/04/04 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
python批量解压zip文件的方法
2019/08/20 Python
Python帮你识破双11的套路
2019/11/11 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
运动会广播稿100字
2014/09/14 职场文书
办公室主任四风问题对照检查材料思想汇报
2014/09/28 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
考研导师推荐信范文
2015/03/27 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书