JavaScript
搜索
分类

JavaScript与JQuery框架基础入门教程

作者：cgblpx 时间：2024-04-22 22:23:08　

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

来源：https://blog.csdn.net/u012932876/article/details/118597814

标签：JavaScript,JQuery,基础
0
投稿

猜你喜欢

  • javascript使用正则表达式检测IP地址

    2024-03-15 11:06:52

  • 利于python脚本编写可视化nmap和masscan的方法

    2021-04-14 11:19:52

  • Python的Django框架中从url中捕捉文本的方法

    2023-08-29 11:13:13

  • 为你的ASP程序作一个负载测试

    2008-10-23 13:48:00

  • Python设计模式中的策略模式详解

    2023-09-03 09:26:26

  • SQL附加数据库失败问题的解决方法

    2024-01-25 19:22:10

  • SQL窗口函数之取值窗口函数的使用

    2024-01-27 06:53:37

  • 利用windows任务计划实现oracle的定期备份

    2009-08-31 12:24:00

  • python基础之局部变量和全局变量

    2021-10-23 06:50:31

  • python输出数组中指定元素的所有索引示例

    2021-11-27 02:21:09

  • sqlserver只有MDF文件恢复数据库的方法

    2024-01-25 11:20:32

  • 带有定位当前位置的百度地图前端web api实例代码

    2024-05-08 10:11:56

  • Python元组拆包和具名元组解析实例详解

    2021-10-17 05:26:58

  • SQLServer查询某个时间段购买过商品的所有用户

    2024-01-17 20:02:10

  • php 多继承的几种常见实现方法示例

    2023-11-22 19:03:19

  • Python利用公共键如何对字典列表进行排序详解

    2022-03-04 01:31:33

  • pytorch使用tensorboardX进行loss可视化实例

    2021-04-07 20:17:36

  • tensorflow 大于某个值为1,小于为0的实例

    2023-06-12 03:00:43

  • Pytorch中的gather使用方法

    2021-11-22 06:11:49

  • SqlServer将查询结果转换为XML和JSON

    2024-01-18 20:25:59
    • asp之家 网络编程 m.aspxhome.com