JavaScript学习笔记

sxsl_lwp

已于 2022-04-24 10:09:23 修改

阅读量167

点赞数

分类专栏：技术类文章标签： javascript

于 2021-05-05 16:26:05 首次发布

本文链接：https://blog.csdn.net/sxsl_lwp/article/details/116136543

版权

技术类专栏收录该内容

21 篇文章 1 订阅

订阅专栏

JavaScript学习笔记

一、JavaScript基础
二、函数
三、面向对象编程
四、操作BOM对象
六、操作dom对象
七、jQuery
八、小技巧

一、JavaScript基础

（一）、什么是javas

JavaScript概述：
JavaScript 是属于 HTML 和 Web 的编程语言。
JavaScript功能：
(1) JavaScript 能够改变 HTML 内容.
(2) JavaScript 能够改变 HTML 属性
(3) JavaScript 能够隐藏 HTML 元素
(4) JavaScript 能够显示 HTML 元素
ECMAScript是JavaScript的一个标准，最新版本为ECMA6，大部分浏览器支持ECMA5。

（二）、引入方式：

内部标签使用：放在HTML文件的head标签或body标签的底部，如下

    <script>
        alert("hello world!!")
    </script>

外部引入：在HTML文件中引入JavaScript文件。

    <script src="js/lwp.js"> </script>

script必须成对出现，不用显示定义type也默认是JavaScript。

（三）、语法入门

定义变量：var 变量名=值;，其中值可以是数字或字符串。
注释：单行注释//;多行注释：/* */。
条件判断：if语句。
浏览器控制台：按住网页点击右键——>查看——>点击console（或控制台）；点击菜单更多工具——>开发者工具—>点击控制台；运行js代码如：console.log(ll)，输出变量ll的值。
浏览器的开发者工具中的source（源代码）可以调试js程序；如设置断点，刷新页面的单步执行，右侧watch窗口可以看到参数的值。
浏览器的开发者工具中经常用到的功能：拷贝网页点击Elements（元素），运行js点击console（控制台），调试程序点击source（源代码），抓包点击network（网络），查看cookie内容等点击Application（应用程序）。

（四）、基础数据类型

js不区分小数与整数，均用number；NaN不是一个数字，它与所有的数值均不相等，包括自己,只能通过方法isNaN()来判断非数字。
字符串、布尔值、逻辑运算符 && || ！。
比较运算符：=赋值符号；等于符号，类型不一样但值一样结果为true；= == 绝对等于符号类型一样，值相等结果为true；这是js的一个缺陷，最好别使用。
浮点数问题：1/3===(1-2/3)，结果为false；故尽量避免使用浮点数进行计算，存在精度问题；可以用Matn.abs(1/3-(1-2/3))<0.00001来判断浮点数相等。
null（空）与undefined（未定义）。
数组：Js中不需要一个数组为相同类型，如var arr=[1,2,4,“45”,true,null]；取数组下标越界，则报undefined。
对象：对象用{}定义，数组用[]定义。
严格检查模式：“use strict”，预防js的随意性导致出现的一些问题；建议局部变量均使用let来定义；前提idea支持Es6；必须写在script标签的第一行。
如何设置idea支持es6语法，setting—>languages & frameworks—>JavaScript—>JavaScript Language Version选择es6。

（五）、数据类型

正常字符串，使用单引号或双引号包裹；特殊字符需用转义符号\。
Unicode字符编码\u####四位数，Ascii编码\x##两位数。
多行字符串:tab键上方esc键下方的类似单引号。

        var msg=`I am
        lwp
        `

模板字符串

        let name='lwp';
        let age=48;
        var msg=`你好：${name}`

字符串是不可变的是指把字符串当成数组，以数组下标方式赋值是不行的；大小写转换，是方法不是属性。

        name.toUpperCase();
        name.toLowerCase();
        name.indexOf(t);
        name.substr(2);//截取第二个位置的字符串到最后一个位置的字符串，字符串位置从0开始编号
        name.substr(2,4);//截取2到4之间的字符串，包含2单不包含4位置

数组：Array可以保护任意类型数据。
(1) 假如给数组arr.length赋值，数组大小就会发生变化。如果变小，元素就会丢失。
(2) 通过下标取值或赋值；indexof通过元素获得下标索引。
(3) slice()截取array的一部分，返回一个新数组；类似string中的substring方法。
(4) push和pop一个往数组尾部压数据，一个尾部往外弹数据。
(5) shift()与unshift()，在数组头部插入或弹出元素。
对象
(1) 定义：用{}框住，内含多次属性，属性名与属性值用“:”分隔（键值对），不同属性之间用“,”分隔，最后一个属性值后面没有逗号。

var  对象名={
       属性名1:属性值1,
       属性名2:属性值2,
       ...
       属性名n: 属性值n    
}

(2) 使用一个不存在的对象属性不会报错，只显示undefined。
(3) 可动态删减属性：delete删除属性；直接给对象新的属性赋值即增加了新的属性。
(4) JavaScript中所有的键均为字符串，值为任意对象。
(5) 判断属性是否在对象中:“属性名” in 对象。
(6) 判断一个属性是否属于对象自身拥有的用hasOwnProperty。
7. Map和Set
(1) Map:Map是一组键值对的结构，具有极快的查找速度。

//Map的定义
//空map设值key-value
var m = new Map();
m.set("XiaoMing",99);
m.set("XiaoHong",66);
//构造参数传key-value
var m = new Map([['XiaoMing', 99], ['XiaoHong', 66]]);
//Map的方法
var m = new Map(); // 空Map
m.set('XiaoMing', 99); // 添加新的key-value
m.has('XiaoMing'); // 是否存在key 'XiaoMing': true
m.get('XiaoMing'); // 99
m.delete('XiaoMing'); // 删除key 'XiaoMing'
m.get('XiaoMing'); // undefined
//对一个key重复设值，后面的值会将前面的值覆盖
var m = new Map();
m.set('XiaoMing', 99);
m.set('XiaoMing', 98);
m.get('XiaoMing'); // 98

(2) Set Set和Map类似，但set只存储key，且key不重复。

//Set的创建。
var s1 = new Set(); // 空Set
s1.add(1);
s1.add(2);
s1.add(3);
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

(3) Map及Set的遍历:Array可以采用下标进行循环遍历，Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了iterable类型，Array、Map、Set都属于iterable类型。

//具有iterable类型的集合可以通过新的for ... of循环来遍历。
var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    alert(x);
}
for (var x of s) { // 遍历Set
    alert(x);
}
for (var x of m) { // 遍历Map
    alert(x[0] + '=' + x[1]);
}
//forEach是iterable内置的方法，它接收一个函数，每次迭代就自动回调该函数。
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    alert(element);
});
//　Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身：
var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    alert(element);
});
//Map的回调函数参数依次为value、key和map本身：
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    alert(value);
});

（六）、流程控制

if 条件判断
white 循环，避免死循环
for 循环，forEach循环

二、函数

（一）、函数定义

函数定义：一旦遇到return代表函数结束；没有遇到return函数也会有返回结果，返回结果为undefined。

//绝对值函数,
//定义方法一
    function abx (x){
        if (x>=0){
            return x;
        }else{
            return -x;
    }
//定义方法二
var abx=function{
        if (x>=0){
            return x;
        }else{
            return -x;
}
//匿名函数：直接用function(x){ ...}这是一个匿名函数，直接将其返回值赋值给其他变量
var bb = function(x) {
        if (x>=0){
            return x;
        }else{
            return -x;
 }

函数的调用：传入参数没有java要求那么严格，可以传任意个参数，也可以不传参数。
arguments：是JS的一个关键字，代表函数传递进来的所有参数，是一个数组。
rest参数：对于三个点号…，三点放在形参或者等号左边为rest运算符; 放在实参或者等号右边为spread运算符，或者说，放在被赋值一方为rest运算符，放在赋值一方为扩展运算符。

//rest参数只能写在最后面，必须用...标识
var [a, ...rest] = [1, 2, 3, 4];
console.log(a);//1
console.log(rest);//[2, 3, 4]
//...后面的就是rest参数，该参数只包含初a、b、c以外的其它参数
function isPush (a,b,c,...m) {
	if(m.indexOf(a) == -1) m.push(a);
	if(m.indexOf(b) == -1) m.push(b);
	if(m.indexOf(c) == -1) m.push(c);
	return m;
}
console.log(isPush(1,2,3,1,2,5,6,4));//[1, 2, 5, 6, 4, 3]

（二）、变量的作用域

在Js中var定义的变量有作用域，如在函数体内声明的变量不能再函数体外使用。
如果两个函数使用相同的变量名，在各自的函数体内使用不冲突。
内部函数可以访问外部函数的变量，反之则不行。
JS函数查找变量从自身开始，由内向外查找；假设内部函数变量与外部函数变量重名，则内部函数屏蔽外部函数变量。
JS.变量定义规范：所有变量均应放在函数的头部，不要乱放，便于代码维护。
全局变量：只要定义在函数外的均为全局变量，绑定在全局变量Window全局对象中。
由于所有的全局变量均绑定在一个全局对象window上，如果多人定义的全局变量有可能重名，为避免这种冲突，把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。
局部作用域尽量采用let定义；定义常量应const也定义。

（三）、方法

方法的定义：把函数放在对象里面即为方法；对象只包含两样属性和方法。
方法的调用格式：方法名()；
this关键字：面向对象语言中 this 表示当前对象的一个引用；但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
(1) 在方法中，this 表示该方法所属的对象。
(2) 如果单独使用，this 表示全局对象。
(3) 在函数中，this 表示全局对象。
(4) 在函数中，在严格模式下，this 是未定义的(undefined)。
(5) 在事件中，this 表示接收事件的元素。
(6) 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
方法的两种写法：一种直接在对象内部定义函数；一种是外部定义函数，内部定义一个方法名来引用外部函数。

（四）、内部对象

Date：用于处理日期和时间。
(1) 创建 Date 对象的语法：var myDate=new Date()；Date 对象会自动把当前日期和时间保存为其初始值。
(2) Date 对象常用方法

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getYear()	请使用 getFullYear() 方法代替。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

JSON
(1) 概念：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
(2) 在JS中一切均为对象，任何JS支持的类型都可以用JSON来表示。
(3) 格式：所有对象均用{}；所有数组均用[]；所有键值对均为key:value；
(4) JS对象和JSON字符串的转换

//字符串转对象
var jsonObject= JSON.parse(jsonstr);
//对象转字符串
var jsonstr =JSON.stringify(jsonObject);

(5) JSON字符串与JS对象的区别

var obj={a:"lwp",b:19} //这是对象
var json='{"a":"lwp","b":19 }'

三、面向对象编程

JavaScript prototype（原型对象）：所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。
ES6之前定义类且生产实例：

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

添加新属性:使用 prototype 属性就可以给对象的构造函数添加新的属性。

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English"; //增加一个新属性nationality，值为English

添加新方法

<script>
function Students(name, height, age) {
    this.name = name;
    this.height = height;
    this.age = age;
    this.outputInfo  = function() {
        document.write('name = ' + this.name +  '<br\>' + 'height = ' + this.height + '<br\>');
    }
}

//增加一个新方法
Students.prototype.newFunction = function() {
    document.write('此方法是通过prototype继承后实现的');
}

var stu1 = new Students('lwp', 123, 12);
stu1.outputInfo();
stu1.newFunction();
</script>

JavaScript的原型及原型链
(1) 在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。
(2) proto:这是每个对象(除null外)都会有的属性，叫做__proto__，这个属性会指向该对象的原型。

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

(3) constructor:每个原型都有一个constructor属性，指向该关联的构造函数。

function Person() {

}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

(4) 原型的原型：其实原型对象就是通过 Object 构造函数生成的，结合之前所讲，实例的 proto 指向构造函数的 prototype
在这里插入图片描述
(5) 造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。

四、操作BOM对象

浏览器内核：IE6-11，Chrome，Safari，firefox。
window对象：是 JavaScript 层级中的顶层对象；代表一个浏览器窗口或一个框架；会在或每次出现时被自动创建。
window 也是 BOM 的一个对象，除去编程意义上的“兜底对象”之外，通过这个对象可以获取窗口位置、确定窗口大小、弹出对话框等等。例如我要关闭当前窗口
Navigator：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用
window.navigator.appCodeName //浏览器代码名
window.navigator.appName //浏览器步伐名
window.navigator.appMinorVersion //浏览器补钉版本
window.navigator.cpuClass //cpu类型 x86
window.navigator.platform //操作体系类型 win32
window.navigator.plugins
window.navigator.opsProfile
window.navigator.userProfile
window.navigator.systemLanguage //客户体系语言 zh-cn简体中文
window.navigator.userLanguage //用户语言,同上
window.navigator.appVersion //浏览器版本(包括体系版本)
window.navigator.userAgent//用户代理头的字符串表示
window.navigator.onLine //用户否在线
window.navigator.cookieEnabled //浏览器是否撑持cookie
window.navigator.mimeTypes
screen：用于获取某些关于用户屏幕的信息，也可用window.screen引用它
window.screen.width //屏幕宽度
window.screen.height //屏幕高度
window.screen.colorDepth //屏幕颜色深度
window.screen.availWidth //可用宽度(除去任务栏的高度)
window.screen.availHeight //可用高度(除去任务栏的高度)
location对象：非常重要
location对象：表示载入窗口的URL，也可用window.location引用它
location.href //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm
location.portocol //URL中使用的协议，即双斜杠之前的部分，如http
location.host //服务器的名字，如www.wrox.com
location.hostname //通常等于host，有时会省略前面的www
location.port //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080
location.pathname //URL中主机名后的部分，如/pictures/index.htm
location.search //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx
location.hash //如果URL包含#，返回该符号之后的内容，如#anchor1
location.assign(“http:www.baidu.com”); //同location.href，新地址都会被加到浏览器的历史栈中
location.replace(“http:www.baidu.com”); //同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问
location.reload(true | false); //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false
document.location.reload(URL) //打开新的网页
cookie：及时清除Cookie内容，避免信息泄露。
history对象：历史网页
window.history.length //浏览过的页面数；
history.forward() //在浏览历史里前进一步
history.go(i) //到汗青详细登记单的第i位
//i>0进步,i<0撤退退却
window对象及成员关系图以及相应的属性和方法

六、操作dom对象

HTML DOM 模型被构造为对象的树：
JavaScript 获得了足够的能力来创建动态的 HTML
(1) JavaScript 能够改变页面中的所有 HTML 元素
(2) JavaScript 能够改变页面中的所有 HTML 属性
(3) JavaScript 能够改变页面中的所有 CSS 样式
(4) JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
(1) 通过 id 查找 HTML 元素

var x=document.getElementById("intro");

(2) 通过标签名查找 HTML 元素

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

(3) 通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

改变 HTML

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>

改变CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

</body>
</html>

DOM 事件
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

DOM EventListener

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意:不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”。
8. DOM 元素 (节点)
(1) 创建新的 HTML 元素 (节点) - appendChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

(2) 创建新的 HTML 元素 (节点) - insertBefore()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

(3) 移除已存在的元素要移除一个元素，你需要知道该元素的父元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

(4) 替换 HTML 元素 - replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

DOM 集合(Collection)
(1) HTMLCollection 对象，getElementsByTagName() 方法返回 HTMLCollection 对象，HTMLCollection 对象类似包含 HTML 元素的一个数组。
(2) HTMLCollection 对象 length 属性：HTMLCollection 对象的 length 属性定义了集合中元素的数量。
(3) 代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改 p 元素的背景颜色。</p>

<button onclick="myFunction()">点我</button>

<script>
function myFunction() {
    var myCollection = document.getElementsByTagName("p");
    var i;
    for (i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
}
</script>

</body>
</html>

JavaScript HTML DOM 节点列表

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';
</script>

</body>
</html>

HTMLCollection 与 NodeList 的区别
(1) HTMLCollection 是 HTML 元素的集合。
(2) NodeList 是一个文档节点的集合。
(3) NodeList 与 HTMLCollection 有很多类似的地方：NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, …) 来获取元素。NodeList 与 HTMLCollection 都有 length 属性。
(4) HTMLCollection 元素可以通过 name，id 或索引来获取。
(5) NodeList 只能通过索引来获取。
(6) 只有 NodeList 对象有包含属性节点和文本节点。

七、jQuery

在线学习文档路径：https://jquery.cuishifeng.cn/
jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。
在HTML中引入jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

jQuery 语法：$(selector).action()
(1) 美元符号定义 jQuery
(2) 选择符（selector）“查询”和“查找” HTML 元素
(3) jQuery 的 action() 执行对元素的操作
jQuery 选择器

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器
$("p").css("background-color","red");

更多的选择器实例

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有元素
$(“p.intro”)	所有 class=“intro” 的元素
$(“.intro”)	所有 class=“intro” 的元素
$(“#intro”)	id=“intro” 的元素
$(“ul li:first”)	每个的第一个元素
$(" [h r e f$ =‘.jpg’]")	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=“intro” 的元素中的所有 class=“head” 的元素

八、小技巧

巩固JS的方法：看jQuery源码、看游戏源码
巩固HTML、CSS方法：扒网站。全部down下来，对照修改看效果。
element-ui，layer弹窗组件

sxsl_lwp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

JavaScript学习笔记JavaScript基础一、什么是javas二、引入方式：三、语法入门四、数据类型lessJavaScript基础一、什么是javasJavaScript概述：JavaScript 是属于 HTML 和 Web 的编程语言。JavaScript功能：(1) JavaScript 能够改变 HTML 内容.(2) JavaScript 能够改变 HTML 属性(3) JavaScript 能够隐藏 HTML 元素(4) JavaScript 能够显示 HTML
复制链接

扫一扫