首页 > 资讯 > 前端开发 > JavaScript >JavaScript与JQuery框架基础入门教程

503

分享到

JavaScript与JQuery框架基础入门教程

2024-04-02 19:04:59 503人浏览八月长安

摘要

目录一，js对象二，DOM–1，作用–2，测试三，Jquery–1，概述–2，使用步骤–3，入门案例–4，jQuery的文档就绪四，JQuery的语法–1，选择器–2,常用函数–3,

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

总结

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript与JQuery框架基础入门教程

本文链接: https://www.lsjlt.com/news/130313.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

JavaScript与JQuery框架基础入门教程

目录一，JS对象二，DOM–1，作用–2，测试三，Jquery–1，概述–2，使用步骤–3，入门案例–4，jQuery的文档就绪四，JQuery的语法–1，选择器–2,常用函数–3,...

99+

2024-04-02
python入门基础教程

Python是一门简单易学、功能强大的编程语言，适合初学者入门。下面是一个简要的Python入门基础教程，帮助您快速上手Python编程。1. 安装Python：首先，您需要在计算机上安装Python解释器。您可以从Python官方网站（h...

99+

2023-10-25

python 入门基础教程
EF Core基础入门教程

EF Core 是一个ORM（对象关系映射），它使 .NET 开发人员可以使用 .NET对象操作数据库，避免了像ADO.NET访问数据库的代码，开发者只需要编写对象即可。 EF Co...

99+

2024-04-02
Swaggo零基础入门教程

目录配置流程注意区分下载swaggo初始化快速上手gin-swagger简单测试详细配置配置流程注意区分 go-swagger != swaggo 二者功能差不多，都是生成接口文档...

99+

2023-01-28

Swaggo入门 Golang Swaggo入门
SQL 教程-入门基础篇

文章目录 SQL 简介SQL 语法SQL SELECT 语句SQL SELECT DISTINCT 语句SQL WHERE 子句SQL AND & OR 运算符SQL ORDER BY...

99+

2023-08-31

sql 数据库 mybatis mysql
Spring 零基础入门WebFlux框架体系

目录基于注解编程模型函数式编程模型传统的基于Servlet的Web框架，如Spring MVC,在本质上都是阻塞和多线程的，每个连接都会使用一个线程。在请求处理的时候，会在线程池中拉...

99+

2024-04-02
python入门基础教程02 Pytho

02 Python简介Python简介Python是一种解释型、面向对象、动态数据类型的高级程序设计语言，属于应用层软件。自从20 世纪90 年代初Python语言诞生至今，它逐渐被广泛应用于处理系统管理任务、自动化运维、图像处理游戏和We...

99+

2023-01-31

基础教程入门 python
Leaflet基础入门教程示例

目录什么是Webgis？什么是Leaflet？在Vue中安装Leaflet，与其他依赖在App.vue中使用初始化地图chinaProvider地图瓦片addControls使用工具...

99+

2023-01-04

Leaflet 基础 Leaflet 入门教程
python入门基础教程10 pytho

if分支语句分支语句的作用是在某些条件控制下有选择的执行实现一定功能语句块。if 分支语句则是当if后的条件满足时，if 下的语句块被执行，语法格式如下所示：if <condition>: statements让我们看看...

99+

2023-01-31

基础教程入门 python
HTML入门零基础教程（四）

嗨，大家好，我是异星球的小怪同志一个想法有点乱七八糟的小怪如果觉得对你有帮助，请支持一波。希望未来可以一起学习交流。通过前三篇的学习，相信你们对HTML有了一些基础的了解，那么我们就来先做一个小练习，巩固一下之前所学习的知识。目...

99+

2023-08-31

html 前端 css javascript vscode
python入门基础教程05 Pytho

Python-Shell反馈常见错误初学者通常会使用Python-Shell来学习Python基础及语法知识，在使用Python-Shell 时会遇到这样或者那样的错误，有的是语法错误，有的是键入的函数或者变量名字拼写错误，现就初学者常出现...

99+

2023-01-31

基础教程入门 python
python入门基础教程09 pytho

表达式表达式，是由数字、算符、数字分组符号括号、自由变量和约束变量等以能求得数值的有意义排列方法所得的组合,故表示通常是由操作数和操作符两部分组成，如果操作符前后均有操作数，我们称此类操作符是双目运算符，例如加法、减法、取模、赋值运算等运算...

99+

2023-01-31

基础教程入门 python
Laravel框架教程入门篇（一）

安装Laravel 通过Composer安装 composer create-project laravel/laravel example-appcd example-appphp artisan ...

99+

2023-09-01

laravel php
前端基础入门四（JavaScript基础）

目标:掌握编程的基本思维掌握编程的基本语法我们先来学习JavaScript基础，后续会讲解JavaScript高级。重点内容变量的声明及使用数据类型类型转换运算符JavaScript介绍JavaScript是什么JavaScript是一种运...

99+

2023-06-03
Python学习入门基础教程(lear

在if分支判断语句里的条件判断语句不一定就是一个表达式，可以是多个（布尔）表达式的组合关系运算，这里如何使用更多的关系表达式构建出一个比较复杂的条件判断呢？这里需要再了解一下逻辑运算的基础知识。逻辑关系运算有以下几种运算符. ...

99+

2023-01-31

基础教程入门 Python
Vue全家桶入门基础教程

目录1. Vue概述 2. Vue的基本使用2.1 传统开发模式对比2.2 Vue.js之HelloWorld基本步骤2.3 Vue.js之HelloWorld细节分析3....

99+

2024-04-02
Python学习入门基础教程(learn

在Python里可以自定义函数，实现某特定功能，这里首先要区分一下函数的定义和函数的调用两个基本概念，初学者往往容易混淆。函数的定义是指将一堆能实现特定功能的语句用一个函数名标识起来，而函数的调用则是通过函数名来使用这一堆语句...

99+

2023-01-31

基础教程入门 Python
Python基础教程,Python入门教程(超详细)

目录为什么使用PythonPython应用场合Hello world国际化支持便易用的计算器字符串,ASCII和UNICODE使用List条件和循环语句如何定义函数文件I/O异常处理...

99+

2024-04-02
MySQL基础入门教程之事务

目录引言1、事务操作1.1 未控制事务1.2 控制事务一1.3 控制事务二2、事务的四大特性3、并发事务问题4、事务隔离级别总结引言事务是一组操作的集合，它是一个不可分割的工作单位...

99+

2024-04-02
Python pygame新手入门基础教程

目录pygame简介pygame实现窗口设置屏幕背景色添加文字绘制多边形绘制直线绘制圆形绘制椭圆绘制矩形总结pygame简介 pygame可以实现python游戏的一个基础包。 py...

99+

2024-04-02