JavaScript与JQuery框架基础入门教程

更新时间：2021年07月12日 15:05:18 作者：cgblpx

这篇文章主要介绍了jQuery和JavaScript入门基础知识学习指南,jQuery是当下最主流人气最高的JavaScript库,需要的朋友可以参考下

一，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>

总结

本篇文章就到这里了，希望能给你带来帮助，也希望您能够多多关注脚本之家的更多内容！

您可能感兴趣的文章:

js简单封装监听快捷键对象示例及使用
这篇文章主要为大家介绍了js简单封装监听快捷键对象及使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
如果文字过长,则将过长的部分变成省略号显示
如果文字过长,则将过长的部分变成省略号显示...
2006-06-06
JavaScript代码优化技巧示例详解
这篇文章主要为大家介绍了JavaScript代码优化技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
一篇文章学会jsBridge的运行机制
JSBridge是一座用JavaScript搭建起来的桥，搭建这座桥的目的也很简单，让native可以调用web的js代码，让web可以 “调用” 原生的代码。本文主要通过分析源码讲解jsBridge的运行机制，感兴趣的朋友一起来看看吧
2021-09-09
字节飞书面试promise.all实现示例
这篇文章主要为大家介绍了字节飞书面试promise.all实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-06-06
精确到按钮级别前端权限管理实现方案
这篇文章主要为大家介绍了精确到按钮级别前端权限管理实现方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Web项目如何配置Eslint过程详解
这篇文章主要为大家介绍了Web项目如何配置Eslint过程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
微信小程序获取用户openId的实现方法
这篇文章主要介绍了微信小程序获取用户openId的实现方法的相关资料,需要的朋友可以参考下
2017-05-05
微信小程序限制1M的瘦身技巧与方法详解
这篇文章主要介绍了微信小程序瘦身技巧与方法详解的相关资料,现在微信小程序提交代码只有1M大小的限制，这就对开发者提出难题了，这里提供了相关方法技巧，需要的朋友可以参考下
2017-01-01
js中yield参数应用示例深入理解
这篇文章主要为大家介绍了js中yield参数应用示例深入理解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08