JS与JQ笔记

最新推荐文章于 2022-01-06 20:06:24 发布

Snail_565

最新推荐文章于 2022-01-06 20:06:24 发布

阅读量305

点赞数

分类专栏： JS与JQ 文章标签： JS JQ

本文链接：https://blog.csdn.net/snail_565/article/details/100639848

版权

JS与JQ 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS与JQ笔记

1 Javascript
2 JQuery

1 Javascript

1.1 Javascript的组成部分：

ECMAScript:核心，包含（基本语法，变量，关键字，保留字，数据类型，语句，函数等等）
DOM:文档对象模型，包含（整个html页面的内容）
BOM:浏览器对象模型，包含（整个浏览器相关内容）

1.2 JS获取元素内容的方式

获取元素：document.getElementById(“id名称”);
获取元素里面的值：document.getElementById(“id名称”).value;
如果id是一个字符串，那么必须加上引号，如果是一个变量那么不需要。
Document.getElementsByName() 方法可返回带有指定名称的对象的集合。

1.3 javascripte的输出

警告框：alert();
向页面指定位置写入内容：innerHTML(属性)
向页面写入内容：document.write(“”);
记住：每一个标签都有一个style属性。

1.4 javascript的引入方式（有3种）

1,内部引入方式
2,外部引入方式
3,行内式例如：οnclick=”javascript:location.href=’要跳转的url’”;

1.5 js常用的事件

onload事件”页面加载事件”：
方式一：绑定在body标签的位置，如下图：
在这里插入图片描述
方式二：（第二种使用方式，也可以不在body上写，但在脚本中window.οnlοad=function(){ … }，如下图）

onsubmit事件：要有返回值
onmouseover事件和onmouseout事件
onclick事件
onfocus事件和onblur事件

javascript事件:
在这里插入图片描述
事件如何使用：在需要事件响应的标签中加上事件=”函数()”，例如οnclick=”show()”，再在script区域写show函数。

1.6 Window对象需要掌握的方法

Window对象需要掌握的方法：（Window中的方法可以不写Window调用）
1,alert()
2,setInterval(“所要执行的函数名()”,毫秒值); 定时器
3,clearInterval(由setInterval()返回的id值); 取消定时器
4,setTimeout();
5,clearTimeout();
6,confirm();确认弹出框
7,prompt();输入框

History对象需要掌握的方法：
1,back(); 与在浏览器点击后退按钮相同
2,forward(); 与在浏览器中点击按钮向前相同
3,go();

location对象掌握的方法：
Location.href=”要跳转的URL”

DOM文档结构图如下

Document:整个html文件都成为一个document文档
Element:所有的标签都是Element元素
Attribute：标签里面的属性
Text：标签中间夹着的内容为text文本
Node:document、element、attribute、text统称为节点node.

Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
在这里插入图片描述
后面两个方法获取之后需要遍历！
Document对象有两个方法很重要，但在手册中查不到
创建文本节点：document.createTextNode()
创建元素节点：document.createElement();

DOM对象中的Element对象
常用的方法：
在这里插入图片描述
DOM对象中的Attribute对象
我们所认知的html页面中所有标签里面的属性都是attribute

javascript内置对象：

Javascript中的数组长度可变！像java中的集合,即使定义了一个长度，仍然可以再添加以致超过这个长度

javascript的全局对象中的方法不需要new就能使用。
在这里插入图片描述

2 JQuery

JQ页面加载与JS页面加载区别：
1，js传统的方式页面加载会存在覆盖问题，加载比JQ慢（整个页面加载完毕<包括里面的其他内容，比如图片>）
2，JQ的加载比JS加载要快！（当整个dom树结构绘制完毕就会加载）
3，JQ不存在覆盖问题，加载的时候是顺序执行

JQ的页面加载写法：$(function){ …});

JS匿名方法加载方法：
在这里插入图片描述
JS普通页面加载方法：

JQ的页面加载与获取：

（这里的$(“#btn”)就已经相当于获取id为btn的元素对象了,click相当于onclick）

2.1 JQ对象能和DOM对象相互转换

注意：JQ对象无法操作JS里面的属性和方法，DOM对象无法操作JQ对象里面的属性和方法！

JQ对象向DOM对象转换方式一：$(“#span1”).get(0)：相当于获取id为span1的DOM对象，get(0)表示获取这种相同类型的第一个对象，然后后面就可以接JS的属性或方法使用了。
JQ对象向DOM对象转换方式二：$(“#span1”)[0]
将DOM对象转换成JQ对象：$(spanEle) 这里spanEle为DOM对象，然后后面就可以接JS的属性或方法使用了。

当返回的是JQ对象时，接收变量应该写为var $变量名，其实也可以直接var 变量名，二者本质上没区别，只是为了区分是JQ对象还是DOM对象。
在chrome中JQ对象是对DOM对象的包装。
JQ对象：
在这里插入图片描述
DOM对象：

在JQ文档中如下图区域，这些方法都是设置指定元素的显示、隐藏和显示风格、隐藏风格。

2.2 选择器

2.2.1 基本选择器

id选择器: $(“#id”)
标签选择器: $(“标签名称”)
类选择器: $(“.class”)
所有选择器(选定所有的标签): $(“*”)
选择多个条件的选择器: $(“条件一”,”条件二”)

JQ设置css基本属性一般用：
在这里插入图片描述

2.2.2 层级选择器

在给定的祖先元素下匹配所有的后代元素(儿子,孙子,重孙子): $(“form input”)
在给定的父元素下匹配所有的子元素(儿子): $(“form > input”)
匹配所有紧接在 prev 元素后的 next 元素(同桌): $(“label + input”)
匹配 prev 元素之后的所有 siblings 元素(兄弟): $(“form ~ input”)