WEB_Day08(BOM、浏览器的组成、window 对象、事件、Navigator 对象的属性、Screen 对象、JSON、Jquery、jQuery选择器、 jquery操作样式)

最新推荐文章于 2021-06-05 02:33:27 发布

hrh1276

最新推荐文章于 2021-06-05 02:33:27 发布

阅读量292

点赞数

分类专栏： WEB前端文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_47469183/article/details/115269820

版权

WEB前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

WEB_Day08(BOM、浏览器的组成、window 对象、事件、Navigator 对象的属性、Screen 对象、JSON、Jquery、jQuery选择器、 jquery操作样式)

BOM

JavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

代码嵌入网页的方法：

网页中嵌入 JavaScript 代码，主要有四种方法。

<script>元素直接嵌入代码。
<script>标签加载外部脚本
事件属性
URL 协议

script 元素嵌入代码：

<script> var x = 1 + 5; console.log(x); </script>

script 元素加载外部脚本：

<script src="https://www.example.com/script.js"></script>

如果脚本文件使用了非英语字符，还应该注明字符的编码。

<script charset="utf-8" src="https://www.example.com/script.js"></script>

所加载的脚本必须是纯的 JavaScript 代码，不能有HTML代码和

<script charset="utf-8" src="example.js"> console.log('Hello World!'); </script>

事件属性：

网页元素的事件属性（比如onclick和onmouseover），可以写入 JavaScript 代码。当指定事件发生时，就会调用这些代码。

<button id="myBtn" onclick="console.log(this.id)">点击</button>

上面的事件属性代码只有一个语句。如果有多个语句，使用分号分隔即可。

URL 协议：

URL 支持javascript:协议，即在 URL 的位置写入代码，使用这个 URL 的时候就会执行 JavaScript 代码。

<a href="javascript:console.log('Hello')">点击</a>

如果 JavaScript 代码返回一个字符串，浏览器就会新建一个文档，展示这个字符串的内容，原有文档的内容都会消失。

<a href="javascript: new Date().toLocaleTimeString();">点击</a

上面代码中，用户点击链接以后，会打开一个新文档，里面有当前时间。
如果返回的不是字符串，那么浏览器不会新建文档，也不会跳转。

<a href="javascript: void new Date().toLocaleTimeString();">点击</a>
<a href="javascript: new Date().toLocaleTimeString();void 0;">点击</a>

defer 属性：

为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对

<script src="a.js" defer></script>
<script src="b.js" defer></script>

上面代码中，只有等到 DOM 加载完成后，才会执行a.js和b.js。
defer属性的运行流程如下。

浏览器开始解析 HTML 网页。
解析过程中，发现带有defer属性的<script>元素。
浏览器继续往下解析 HTML 网页，同时并行下载<script>元素加载的外部脚本。
浏览器完成解析 HTML 网页，此时再回过头执行已经下载完成的脚本。

async 属性：

解决“阻塞效应”的另一个方法是对<script>元素加入async属性。

<script src="a.js" async></script>
<script src="b.js" async></script>

async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

浏览器开始解析 HTML 网页。
解析过程中，发现带有async属性的script标签。
浏览器继续往下解析 HTML 网页，同时并行下载<script>标签中的外部脚本。
脚本下载完成，浏览器暂停解析 HTML 网页，开始执行下载的脚本。
脚本执行完毕，浏览器恢复解析 HTML 网页。

浏览器的组成

浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）。

渲染引擎：

渲染引擎的主要作用是，将网页代码渲染为用户视觉可以感知的平面文档。
不同的浏览器有不同的渲染引擎。

Firefox：Gecko 引擎
Safari：WebKit 引擎
Chrome：Blink 引擎
IE: Trident 引擎
Edge: EdgeHTML 引擎

渲染引擎处理网页，通常分成四个阶段。

解析代码：HTML 代码解析为 DOM，CSS 代码解析为 CSSOM（CSS Object Model）。
对象合成：将 DOM 和 CSSOM 合成一棵渲染树（render tree）。
布局：计算出渲染树的布局（layout）。
绘制：将渲染树绘制到屏幕。

JavaScript 引擎：

JavaScript 引擎的主要作用是，读取网页中的 JavaScript 代码，对其处理后运行。
JavaScript 是一种解释型语言，也就是说，它不需要编译，由解释器实时运行。这样的好处是运行和修改都比较方便，刷新页面就可以重新解释；缺点是每次运行都要调用解释器，系统开销较大，运行速度慢于编译型语言。
为了提高运行速度，目前的浏览器都将 JavaScript 进行一定程度的编译，生成类似字节码（bytecode）的中间代码，以提高运行速度。
逐行解释将字节码转为机器码，是很低效的。为了提高运行速度，现代浏览器改为采用“即时编译”（Just In Time compiler，缩写 JIT），即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存（inline cache）。通常，一个程序被经常用到的，只是其中一小部分代码，有了缓存的编译结果，整个程序的运行速度就会显著提升。
逐行解释将字节码转为机器码，是很低效的。为了提高运行速度，现代浏览器改为采用“即时编译”（Just In Time compiler，缩写 JIT），即字节码只在运行时编译，用到哪一行就编译哪一行，并且把编译结果缓存（inline cache）。通常，一个程序被经常用到的，只是其中一小部分代码，有了缓存的编译结果，整个程序的运行速度就会显著提升。
字节码不能直接运行，而是运行在一个虚拟机（Virtual Machine）之上，一般也把虚拟机称为 JavaScript 引擎。并非所有的 JavaScript 虚拟机运行时都有字节码，有的 JavaScript 虚拟机基于源码，即只要有可能，就通过 JIT（just in time）编译器直接把源码编译成机器码运行，省略字节码步骤。这一点与其他采用虚拟机（比如 Java）的语言不尽相同。这样做的目的，是为了尽可能地优化代码、提高性能。下面是目前最常见的一些 JavaScript 虚拟机：

Chakra (Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)

window 对象：

概述：

浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。

 <script type="text/javascript">
    a = 10;//变量未声明 但是可以直接使用 此时的变量就类似于
    window.a = 20;
    console.log(a);
  </script>

位置大小属性：

以下属性返回window对象的位置信息和大小信息。

window.screenX，window.screenY
window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。
window.innerHeight，window.innerWidth
window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。
用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因此可见部分（视口）就变小了。
注意，这两个属性值包括滚动条的高度和宽度。
window.outerHeight，window.outerWidth
window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。
window.scrollX，window.scrollY
window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。
注意，这两个属性的返回值不是整数，而是双精度浮点数。如果页面没有滚动，它们的值就是0。
举例来说，如果用户向下拉动了垂直滚动条75像素，那么window.scrollY就是75左右。用户水平向右拉动水平滚动条200像素，window.scrollX就是200左右。
window.pageXOffset，window.pageYOffset
window.pageXOffset属性和window.pageYOffset属性，是window.scrollX和window.scrollY别名。

  	console.log(window.screenX + "---" + window.screenY);
    console.log(window.innerHeight + "---" + window.innerWidth);
    console.log(outerHeight + "---" + outerWidth);//对于window的属性 在使用的时候 window可以省略
    console.log(scrollX + "---" + scrollY);

组件属性：

组件属性返回浏览器的组件对象。这样的属性有下面几个：

window.locationbar：地址栏对象
window.menubar：菜单栏对象
window.scrollbars：窗口的滚动条对象
window.toolbar：工具栏对象
window.statusbar：状态栏对象
window.personalbar：用户安装的个人工具栏对象

    console.log(window.locationbar.visible);
    console.log(window.menubar.visible);
    console.log(window.statusbar.visible)

全局对象属性：

全局对象属性指向一些浏览器原生的全局对象。

window.document：指向document对象，。注意，这个属性有同源限制。只有来自同源的脚本才能读取这个属性。
window.location：指向Location对象，用于获取当前窗口的 URL 信息。它等同于document.location属性，
window.navigator：指向Navigator对象，用于获取环境信息
window.history：指向History对象，表示浏览器的浏览历史
window.localStorage：指向本地储存的 localStorage 数据
window.sessionStorage：指向本地储存的 sessionStorage 数据
window.console：指向console对象，用于操作控制台
window.screen：指向Screen对象，表示屏幕信息

  console.log(window.location);
  console.log(window.navigator);

window 对象的方法：

window.alert()，window.prompt()，window.confirm()
window.alert()、window.prompt()、window.confirm()都是浏览器与用户互动的全局方法。它们会弹出不同的对话框，要求用户做出回应。注意，这三个方法弹出的对话框，都是浏览器统一规定的式样，无法定制。

window.alert()
window.alert()方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息。
window.prompt()
window.prompt()方法弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。它往往用来获取用户输入的数据。
window.confirm()
window.confirm()方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意。

window.open(), window.close()，window.stop()：

window.open()
window.open方法用于新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。它会返回新窗口的引用，如果无法新建窗口，则返回null。
var popup = window.open(‘somefile.html’);
上面代码会让浏览器弹出一个新建窗口，网址是当前域名下的somefile.html。
open方法一共可以接受三个参数。
window.open(url, windowName, [windowFeatures])
- url：字符串，表示新窗口的网址。如果省略，默认网址就是about:blank。
- windowName：字符串，表示新窗口的名字。如果该名字的窗口已经存在，则占用该窗口，不再新建窗口。如果省略，就默认使用_blank，表示新建一个没有名字的窗口。另外还有几个预设值，_self表示当前窗口，_top表示顶层窗口，_parent表示上一层窗口。
- windowFeatures：字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数，比如有没有提示栏、工具条等等。如果省略，则默认打开一个完整 UI 的新窗口。如果新建的是一个已经存在的窗口，则该参数不起作用，浏览器沿用以前窗口的参数

var popup = window.open( 'somepage.html', 'DefinitionsWindows', 'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes' );

window.close()
window.close方法用于关闭当前窗口，一般只用来关闭window.open方法新建的窗口
popup.close()
该方法只对顶层窗口有效，iframe框架之中的窗口使用该方法无效。
window.stop()
window.stop()方法完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象。
window.stop()

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript">
    function op() {
      window.open("table.html");

    }
    function cl() {
      window.close("table.html");
    }

  </script>
</head>

<body style="height: 1000px;">
  <input type="button" onclick="op()" value="打开"></input>

</body>

</html>

事件

window对象可以接收以下事件。

load 事件和 onload 属性：

load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数。
回调函数：执行结束之后再执行的函数称为回调函数

window.onload = function() { 
var elements = document.getElementsByClassName('example'); 
for (var i = 0; i < elements.length; i++) {
 var elt = elements[i]; // ... 
} };

Navigator 对象的属性

Navigator.userAgent：

navigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息。

通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且用户可以改变这个字符串。这个字符串的格式并无统一规定，也无法保证未来的适用性，各种上网设备层出不穷，难以穷尽。所以，现在一般不再通过它识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的 JavaScript 功能。
不过，通过userAgent可以大致准确地识别手机浏览器，方法就是测试是否包含mobi字符串。

    var ua = navigator.userAgent.toLowerCase();

    if (/mobi/i.test(ua)) {
      console.log("手机浏览器")
    } else {
      console.log("PC浏览器")
    }

Navigator.plugins：

Navigator.plugins属性返回一个类似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，比如 Flash、ActiveX 等。

var pluginsLength = navigator.plugins.length; 
for (var i = 0; i < pluginsLength; i++) { 
	console.log(navigator.plugins[i].name); 
	console.log(navigator.plugins[i].filename); 
	console.log(navigator.plugins[i].description); 
	console.log(navigator.plugins[i].version);
}

Navigator.platform：

Navigator.platform属性返回用户的操作系统信息，比如MacIntel、Win32、Linux x86_64等。

navigator.platform // "Linux x86_64"

Navigator.onLine：

navigator.onLine属性返回一个布尔值，表示用户当前在线还是离线（浏览器断线）。
navigator.onLine // true
有时，浏览器可以连接局域网，但是局域网不能连通外网。这时，有的浏览器的onLine属性会返回true，所以不能假定只要是true，用户就一定能访问互联网。不过，如果是false，可以断定用户一定离线。
用户变成在线会触发online事件，变成离线会触发offline事件，可以通过window.ononline和window.onoffline指定这两个事件的回调函数。

window.addEventListener('offline', function(e) { 
	console.log('offline'); 
	});
window.addEventListener('online', function(e) { 
	console.log('online'); 
});

Navigator.language，Navigator.languages：

Navigator.language属性返回一个字符串，表示浏览器的首选语言。该属性只读。
navigator.language // “en”
Navigator.languages属性返回一个数组，表示用户可以接受的语言。Navigator.language总是这个数组的第一个成员。HTTP 请求头信息的Accept-Language字段，就来自这个数组。

navigator.languages // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

如果这个属性发生变化，就会在window对象上触发languagechange事件。

Navigator.cookieEnabled：

navigator.cookieEnabled属性返回一个布尔值，表示浏览器的 Cookie 功能是否打开。
navigator.cookieEnabled // true
注意，这个属性反映的是浏览器总的特性，与是否储存某个具体的网站的 Cookie 无关。用户可以设置某个网站不得储存 Cookie，这时cookieEnabled返回的还是true。

Screen 对象

Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息。window.screen属性指向这个对象。
该对象有下面的属性。

Screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）。
Screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）。因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
Screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）。
Screen.pixelDepth：整数，表示屏幕的色彩位数，比如24表示屏幕提供24位色彩。
Screen.colorDepth：Screen.pixelDepth的别名。严格地说，colorDepth 表示应用程序的颜色深度，pixelDepth 表示屏幕的颜色深度，绝大多数情况下，它们都是同一件事。
Screen.orientation：返回一个对象，表示屏幕的方向。该对象的type属性是一个字符串，表示屏幕的具体方向，landscape-primary表示横放，landscape-secondary表示颠倒的横放，portrait-primary表示竖放，portrait-secondary表示颠倒的竖放。
下面是Screen.orientation的例子。

window.screen.orientation // { angle: 0, type: "landscape-primary", onchange: null }

下面的例子保证屏幕分辨率大于 1024 x 768。

if (window.screen.width >= 1024 && window.screen.height >= 768) { 
// 分辨率不低于 1024x768 
}

下面是根据屏幕的宽度，将用户导向不同网页的代码。

if ((screen.width <= 800) && (screen.height <= 600)) { 
	window.location.replace('small.html');
} else { 
 	window.location.replace('wide.html');
}

json：

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。
JSON采用完全独立于语言的文本格式，这些特性使JSON成为理想的数据交换语言。

JSON具有以下这些形式：

对象是一个无序的“‘名称/值’对”集合。一个对象以 {左括号开始， }右括号结束。
每个“名称”后跟一个 :冒号；“‘名称/值’ 对”之间使用 ,逗号分隔。
在这里插入图片描述
数组是值（value）的有序集合。一个数组以 [左中括号开始， ]右中括号结束。值之间使用 ,逗号分隔。

值（value）可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
在这里插入图片描述

为什么用json

JSON是纯文本格式，是独立于语言和平台的。
生成和解析相对于XML而言要简单。
读写的速度更快。

JSON定义：

json的正常对象的格式（无序）

   var person = { "name": "tom", "age": 23, "sex": true };
    console.log(typeof person);//json对象
    console.log(person.name);
    console.log(person.age);

json的函数对象的格式（无序）

var student = {
      "name": "jack", "abli": function () {

        alert("学习json");
      }
    }

存储字符串的数组

 var arr = ["aa", "bb", "cc"];
    console.log(arr[0]);
    console.log(arr[1]);

存储对象的数组

 var arrObj = [{ "name": "张三", "age": 21 }, { "name": "李四", "age": 22 }];
    console.log(arrObj[0].name + "---" + arrObj[0].age);

将json对象转换为字符串：

  var personStr = JSON.stringify(person);
    console.log(typeof personStr);//String
    console.log(personStr);//{"name":"tom","age":23,"sex":true}
    console.log(personStr.name);//undefined
    //将json数组转换为字符串
    var arrObjStr = JSON.stringify(arrObj);
    console.log(typeof arrObjStr);
    console.log(arrObjStr);

将JSON格式的字符串转换为json对象：

    //将json字符串转换为json对象
    var personObj = JSON.parse(personStr);
    console.log(typeof personObj);
    console.log(personObj.name + "--" + personObj.age);

将JSON格式的字符串数组转换为json数组

//将json类型的字符串数组转换为一个json数组
    var jsonArr = eval(arrObjStr);
    console.log(jsonArr);
    console.log(jsonArr[0].name + "--" + jsonArr[0].age);

Json的使用场景：

在开发中，当我们在访问数据库的时候，进行数据库查询，那么查询到的对象往往都是一个集合（list set map）形式，针对这种形式，在数据传输到前台的时候，是不方便的，同时到达前台之后，也不便于js的解析。因此，一般情况下，我们都会将后台查询到的集合转换为一个json字符串传递到前台，到达前台之后前台可以使用js将json字符串在转换为一个json对象或json数组，此时在使用的时候就可以当作一个对象或数组来直接使用。
同时，在前端页面上，也会给用户提供查询功能，或者收集用户数据，收集到的数据需要提交到后台，此时我们也会将收集到的数据，封装成一个json字符串或json数组传递给后台，此时后台在接受到之后就可以按照正常的对象和数组的方式来使用。

Jquery

概述

JQuery是一个JavaScript库。简化js 的操作：DOM操作事件的处理 AJAX
Jquery可以使用更少的代码完成更多的事情（witer less Do more）

为什么学习jquery

在这里插入图片描述

Jquery的使用：

使用jQuery的三个基本步骤：

引包（引入jQuery文件）

<script src="jquery-1.12.4.js"></script>

入口函数

$(document).ready(function () { });

功能实现

$("#btnShowDiv").click(function () { $("div").show(1000); });

-	JavaScript	jquery
入口函数	只能有一个，如果有多个，后面的会覆盖前面	可以有多个，并且不会发生覆盖的情况
代码容错性	代码容错性差，代码出现错误，会影响到后面代码的运行。	代码容错性好，屏蔽错误，并且不会影响后面代码的运行。
浏览器兼容性	兼容性差，比如火狐不支持innerText	对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性	DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦	DOM操作简单，支持隐式迭代，实现动画非常简单。

入口函数：

 $(function () {
      alert("aaaa");
    })
    $(document).ready(function () {
      alert("bbb");
    })

对比JavaScript的入口函数jQuery的入口函数,执行时机

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载

了解jQuery的$符号：

$是什么其实$ 就是一个函数：$();参数不一样，功能不一样
$常用的几种情况：

$(function() {});//参数是function，说明是入口函数
$(“#btnSetConent”);//参数是字符串，并且以#开头，是一个标签选择，查找id=“btnSetContent”的元素
$(“div”);//查找所有的div元素
$(document).ready(funciton(){})//将document转换成jQuery对象

补充：$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式

jQuery对象与DOM对象之间的转换（难点）:

什么是DOM对象（js对象）？

使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
dom对象只可以使用dom对象的方法和属性。
通过getElementById()查询出来的标签对象是Dom 对象
通过getElementsByName()查询出来的标签对象是Dom 对象
通过getElementsByTagName()查询出来的标签对象是Dom 对象
通过createElement() 方法创建的对象，是Dom 对象

什么是jquery对象？

jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
jquery对象只能使用jquery对象的方法
通过JQuery 提供的API 创建的对象，是JQuery 对象
通过JQuery 包装的Dom 对象，也是JQuery 对象
通过JQuery 提供的API 查询到的对象，是JQuery 对象

jQuery 对象的本质是什么？
JQuery 对象是dom 对象的数组+ jQuery 提供的一系列功能函数。

	var ddiv = document.getElementById("d");
      console.log(ddiv.innerText);
      var jdiv = $(ddiv);//将dom对象转换为jquery对象
      console.log(jdiv.text());
      var div = jdiv[0];//将jquery对象转换为dom对象
      console.log(div.innerText);

jQuery对象和DOM对象的相互转换

jquery对象转DOM对象
- 先有jQuery 对象
- jQuery 对象[下标]取出相应的DOM 对象

var $li = $(“li”); 
//第一种方法（推荐使用） 
$li[0] 
//第二种方法
 $li.get(0)

DOM对象转jquery对象
- 先有DOM 对象
- $( DOM 对象) 就可以转换成为jQuery 对象

var $obj = $(domObj);

在这里插入图片描述

jQuery选择器（重点）

jQuery基本选择器：

在这里插入图片描述

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

层级选择器：

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

<ul id="u">
    <li>
      <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>西瓜</li>
      </ul>
    </li>
    <li>老虎</li>
    <li>狮子</li>
  </ul>

$(function () {
      var s = $("#u>li").size();//子代选择器  选择直接子类 不会涉及到孙子辈
      console.log(s);
      var s1 = $("#u li").size();//后代选择器  选择直接的子类或子类的子类
      console.log(s1);
    })

过滤选择器：

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”,”red”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”)	获取到的li元素中，选择索引号为偶数的元素

  $(function () {
      var s = $("ul:eq(0)>li").size();//子代选择器  选择直接子类 不会涉及到孙子辈
      console.log(s);
      var s1 = $("ul:eq(0) li").size();//后代选择器  选择直接的子类或子类的子类
      console.log(s1);
    })

【案例：隔行变色】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .red {
      background-color: red;
    }

    .green {
      background-color: green;
    }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function () {
      //设置class属性 
      $("ul li:odd").attr("class", "red");
      //获取class属性的值
      console.log($("ul li:odd").attr("class"));
      $("ul li:even").attr("class", "green");
    })
  </script>
</head>

<body>
  <ul>
    <li>苹果</li>
    <li>苹果</li>
    <li>苹果</li>
    <li>苹果</li>
    <li>苹果</li>
  </ul>
</body>

</html>

筛选选择器(方法)：

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$ (“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$ (“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$ (“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

【案例：下拉菜单】this+children+mouseenter+mouseleave

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-image: url(imgs/bg.jpg);
    }

    .wrap li {
      background-image: url(imgs/libg.jpg);
    }

    .wrap>ul>li {
      float: left;
      margin-right: 10px;
      position: relative;
    }

    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }

    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".wrap>ul>li>a").mouseenter(function () {
        $(this).siblings("ul").show();
      })
      $(".wrap>ul>li>a").mouseleave(function () {
        $(this).siblings("ul").hide();
      })
    })
  </script>
</head>

<body>
  <div class="wrap">
    <ul>
      <li>
        <a href="javascript:void(0);">一级菜单1</a>
        <ul class="ul">
          <li><a href="javascript:void(0);">二级菜单11</a></li>
          <li><a href="javascript:void(0);">二级菜单12</a></li>
          <li><a href="javascript:void(0);">二级菜单13</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:void(0);">一级菜单2</a>
        <ul>
          <li><a href="javascript:void(0);">二级菜单21</a></li>
          <li><a href="javascript:void(0);">二级菜单22</a></li>
          <li><a href="javascript:void(0);">二级菜单23</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:void(0);">一级菜单3</a>
        <ul>
          <li><a href="javascript:void(0);">二级菜单31</a></li>
          <li><a href="javascript:void(0);">二级菜单32</a></li>
          <li><a href="javascript:void(0);">二级菜单33</a></li>
        </ul>
      </li>
    </ul>
  </div>

</body>

</html>

【案例：突出展示】siblings+find+opacity(样式透明度)

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    body {
      background: #000;
    }

    .wrap {
      margin: 100px auto 0;
      width: 630px;
      height: 394px;
      padding: 10px 0 0 10px;
      background: #000;
      overflow: hidden;
      border: 1px solid #fff;
    }

    .wrap li {
      float: left;
      margin: 0 10px 10px 0;

    }

    .wrap img {
      display: block;
      border: 0;
    }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function () {
      $("li").mouseenter(function () {
        $(this).css("opacity", 1).siblings().css("opacity", 0.6);
      })
      $("ul").mouseleave(function () {
        $(this).find("li").css("opacity", 1)
      })
    })

  </script>
</head>

<body>
  <div class="wrap">
    <ul>
      <li><a href="#"><img src="imgs/01.jpg" alt="" /></a></li>
      <li><a href="#"><img src="imgs/02.jpg" alt="" /></a></li>
      <li><a href="#"><img src="imgs/03.jpg" alt="" /></a></li>
      <li><a href="#"><img src="imgs/04.jpg" alt="" /></a></li>
      <li><a href="#"><img src="imgs/05.jpg" alt="" /></a></li>
      <li><a href="#"><img src="imgs/06.jpg" alt="" /></a></li>
    </ul>
  </div>
</body>

</html>

【案例：手风琴】next+parent+slideDown+slideUp

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      list-style-type: none;
    }

    .parentWrap {
      width: 200px;
      text-align: center;

    }

    .menuGroup {
      border: 1px solid #999;
      background-color: #e0ecff;
    }

    .groupTitle {
      display: block;
      height: 20px;
      line-height: 20px;
      font-size: 16px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
    }

    .menuGroup>div {
      height: 200px;
      background-color: #fff;
      display: none;
    }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".groupTitle").click(function () {
        $(this).siblings().slideDown("slow");//让当前span下的div显示
        $(this).parent().siblings().children("div").slideUp(200);//隐藏其他的兄弟节点的div

      })
    })

  </script>
</head>

<body>
  <ul class="parentWrap">
    <li class="menuGroup">
      <span class="groupTitle">标题1</span>
      <div>我是弹出来的div1</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题2</span>
      <div>我是弹出来的div2</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题3</span>
      <div>我是弹出来的div3</div>
    </li>
    <li class="menuGroup">
      <span class="groupTitle">标题4</span>
      <div>我是弹出来的div4</div>
    </li>
  </ul>
</body>

</html>

【案例：淘宝精品】index+eq

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }

    ul {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    .wrapper {
      width: 298px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      overflow: hidden;
    }

    #left,
    #center,
    #right {
      float: left;
    }

    #left li,
    #right li {
      background: url(imgs/lili.jpg) repeat-x;
    }

    #left li a,
    #right li a {
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }

    #left li a:hover,
    #right li a:hover {
      background-image: url(imgs/abg.gif);
    }

    #center {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#left li").mouseenter(function () {
        var index = $(this).index();
        $("#center li:eq(" + index + ")").show().siblings().hide();
      })
      $("#right li").mouseenter(function () {
        var index = $(this).index() + 9;
        $("#center li:eq(" + index + ")").show().siblings().hide();
      })
    })
  </script>
</head>

<body>
  <div class="wrapper">

    <ul id="left">
      <li><a href="#">女靴</a></li>
      <li><a href="#">雪地靴</a></li>
      <li><a href="#">冬裙</a></li>
      <li><a href="#">呢大衣</a></li>
      <li><a href="#">毛衣</a></li>
      <li><a href="#">棉服</a></li>
      <li><a href="#">女裤</a></li>
      <li><a href="#">羽绒服</a></li>
      <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
      <li><a href="#"><img src="imgs/女靴.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/雪地靴.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/冬裙.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/呢大衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/毛衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/棉服.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/女裤.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/羽绒服.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/牛仔裤.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/女包.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/男靴.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/登山鞋.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/皮带.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/围巾.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/皮衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/男毛衣.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/男棉服.jpg" width="200" height="250" /></a></li>
      <li><a href="#"><img src="imgs/男包.jpg" width="200" height="250" /></a></li>

    </ul>
    <ul id="right">
      <li><a href="#">女包</a></li>
      <li><a href="#">男靴</a></li>
      <li><a href="#">登山鞋</a></li>
      <li><a href="#">皮带</a></li>
      <li><a href="#">围巾</a></li>
      <li><a href="#">皮衣</a></li>
      <li><a href="#">男毛衣</a></li>
      <li><a href="#">男棉服</a></li>
      <li><a href="#">男包</a></li>
    </ul>
  </div>
</body>

</html>

jquery操作样式（重点）

css操作：

功能：设置或者修改样式，操作的是style属性。

//name：需要设置的样式名称 
//value：对应的样式值 css(name, value); 
//使用案例 $("#one").css("background","gray");
//将背景色修改为灰色

设置多个样式：

    //参数是一个对象，对象中包含了需要设置的样式名和样式值
css(obj);
//使用案例
$("#one").css({
    "background":"gray",
    "width":"400px",
    "height":"200px"
});

获取样式：

//name:需要获取的样式名称
css(name);
//案例
$("div").css("background-color");

class操作：

在这里插入图片描述

【案例：tab栏切换案例】

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .wrapper {
      width: 1000px;
      height: 475px;
      margin: 0 auto;
      margin-top: 100px;
    }

    .tab {
      border: 1px solid #ddd;
      border-bottom: 0;
      height: 36px;
      width: 320px;
    }

    .tab li {
      position: relative;
      float: left;
      width: 80px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      border-top: 4px solid #fff;
    }

    .tab span {
      position: absolute;
      right: 0;
      top: 10px;
      background: #ddd;
      width: 1px;
      height: 14px;
      overflow: hidden;
    }

    .products {
      width: 1002px;
      border: 1px solid #ddd;
      height: 476px;
    }

    .products .main {
      float: left;
      display: none;
    }

    .products .main.selected {
      display: block;
    }

    .tab li.active {
      border-color: red;
      border-bottom: 0;
    }
  </style>
  <script src="js/jquery-1.12.4.js"></script>
  <script type="text/javascript">
    $(function () {
      $(".tab li").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        $(".main").eq($(this).index()).addClass("selected").siblings().removeClass("selected");
      })
    })

  </script>
</head>

<body>
  <div class="wrapper">
    <ul class="tab">
      <li class="tab-item active">国际大牌<span>◆</span></li>
      <li class="tab-item">国妆名牌<span>◆</span></li>
      <li class="tab-item">清洁用品<span>◆</span></li>
      <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
      <div class="main selected">
        <a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
      </div>
      <div class="main">
        <a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
      </div>
    </div>
  </div>
</body>

</html>

hrh1276

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB_Day08(BOM、浏览器的组成、window 对象、事件、Navigator 对象的属性、Screen 对象、JSON、Jquery、jQuery选择器、 jquery操作样式)

WEB_Day(BOM、浏览器的组成、window 对象、事件、Navigator 对象的属性、Screen 对象、JSON、Jquery、jQuery选择器、 jquery操作样式)BOMJavaScript 是浏览器的内置脚本语言。也就是说，浏览器内置了 JavaScript 引擎，并且提供各种接口，让 JavaScript 脚本可以控制浏览器的各种功能。一旦网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。代码嵌入网页的方法
复制链接

扫一扫