javascript jQuery

javascript 与 html 结合

1. 内嵌 在头部

2. 外引 新建一个.js 文件

3. 无法同时使用两个方法 但允许多次书写来进行弹框显示

 延迟加载

windos.onload = function{// 延迟加载
	内嵌式 js 再头部放入
}

语法

定义变量 var 声明变量关键

用一个关键字 var var a;  (；可以加 也可以不加 直接用 var 声明)

变量类型：基本类型 符合类型

基本类型：

字符串‘’“”都是字符串

数字类型 8 2.6

布尔类型 true false

undefined 未下定义的 写一个变量 但不给予赋值(弹框显示 undefined)

符合类型：

数组 []：var arr = [] 里边可以放任意类型数据(包括数组 对象函数) 用，隔开 数组里想直接嵌套对象 var arr = [{}，{}]

对象

var obj = {
     name:"张三"，//key:value                        
	age:50,
	wife:{// 允许对象嵌套}
}

函数

1. . 定义函数 funtion: 定义函数的关键字 (参数列表)
2. 命名函数：function 方法名(变量，变量){函数体}

3. 匿名函数：var aa = function(a,b){} (因为是黑户所以要用变量来进行引用)

4. 使用函数

5. 函数调用

   命名函数调用 ：方法名() 可以不传参数 如果含有多个参数 () 赋值时按顺序进行顺序进行赋值

   匿名函数调用：变量名()

   如果将函数调用覆盖某个值 则直接使用函数调用并不起作用 (原来函数被覆盖了) 要用变量名() 调用

   数组里可以进行命名、匿名函数调用要用 arr[下标]（）与上述同理相当于数组里的变量 = 函数 直接使用原函数并不起作用 console.log(aa) 打印这段代码 console.log(aa()) 加括号是打印返回结果

   在对象里使用 obj. 对象() 对象：函数（）

6. 函数调用

 使用变量

弹框打印 alert()

控制台打印 console.log() console.log(arr[元素下标]) 在一个大数组中还有一个小数组 想要获取小数组里的值要在继续向里 即 console.log(arr[元素下标][小数组下标]) JS 中没有二维数组这一概念

控制台打印想要访问对象里的具体的属性 用 . console.log(obj.name) 要想访问对象的对象的属性用多个 . 对象 数组嵌套类似

console.dir()以对象的方式打印出来

事件

要在 document. 来进行使用

onclick：鼠标单击出现弹框

ondblclick：鼠标双击

onmouseenter：鼠标放上去

onmouseleave；鼠标离开

无参数 用变量来进行编写函数 用 document.onclick = 变量名 不能加（）

有参数时可以先写一个方法 doucument.onclick = function() { aaa{“test”,789}}

循环时 onclick 属性的有参数方法中的并不是实时执行 而是点击实行 要加上 this. 例如 this.style.background = “red”

alret(内容)：以弹框的形式出现

dom 操作(docment odject model)

查找

1. 根据 id 查找 返回符合条件的第一个对象

   var a = document.getElementById(“aa”)

   括号里“aa”是 id 名称 需要注意的是 在.html 中如果是在头部放的 script 要加上 defer 属性 不然遇到 script 会直接进入 无法找到下方的 aa id 或者也可以将 script 放在 body 的最下方

2. 根据 class 获取元素 可以返回所有符合条件的对象组成的数组

   var a =document.getElementsByClassName(“aa”)

   输出是 console.log(a[元素位置]) a 相当于是一个数组

3. 根据元素名称(标签名称) 获取元素 返回所有符合条件的对象组成的数组

   var a =document.getElementsByTagName(“div”)

   输出是 console.log(a[元素位置])

4. 根据选择器 css 获取元素 返回符合条件的第一个对象

   var a = document.querySelector(“div”)

5. 根据选择器获取元素 querySelectorAll() 返回所有符合条件的对象组成的数组

 通过关系查找 要是对象 不能用数组 是属性用 . 带 Element 是只找元素标签

1.  父级 .parentNode parentElement(找此标签的父标签)
2. 子级 children(子标签) childNodes(含文本区 即每个标签和每个标签之间的内容 包括父标签和子标签)

3. 第一个孩子 firstChild==childNodes[0]（内容区）firstElementChild 第一个标签 last 同理

4. 下一个同级弟弟元素 nextSibling(含文本) nextElementSibling(不含文本)

5. 上一个哥哥元素 previousSibling previoElemenSibling

 修改

1. 修改内容

   aa.innerText =“修改的内容”当作文本处理

   aa.innerHTML = “跳转” 把修改的内容当作标签处理

   value 收集用户信息的标签

2. 修改属性

   原生属性 aa.id = “”; aaa.className = ”’

   自定义属性 获取属性值 getAttribute(“属性名”)  设置属性 setAttribute(“属性名”，“属性值‘)

3. 修改样式

   aa.style. 样式 =“”

   整体赋值 aa.style.cssText = “ 属性：xxx; 属性：xxx；”

   也可以在头部写 style 属性

   
   // 但要结合使用
   在 js 中
   aa.className = "test
   在本体中
   aaa

 添加元素

1. 创建元素：var div= document .createElement(“div”)

   复制

   要先找到要复制的元素 用 querySelector 方法

   var newNode = xxx(寻找到的要复制的元素).cloneNode(false/true) true 连内容一起复制 false 只复制外壳

2. 添加元素

   .appendChild(): 在元素·的最后子元素位置添加

   aa.insertBefore(要插入的元素, 在那个节点前插入): 在元素的某个位置前插入，后是 null 表示的是在最后插入

   .replaceChild(新元素，要被替换掉的元素): 替换掉节点

3. 删除元素 找到父级调用删除的方法

   aa(父亲).removeChild(要删除的标签)

   p.parentNode.removeChild(p)

JQuery

// 不能加 defer

change：在输入框 (input) 上里边的值改变会引起变化

hover：鼠标放上移下来都会发生变化

dom 转 jdom 用 $(dom)来进行转化

数组类型 jdom 转 dom jdom[0]

jQuery 绑定事件

// 事件函数
$("div").click(function(){})

统一使用 on 函数绑定 可以绑定多种事件类型 用空格隔开
第一个参数：事件类型  第二个参数：事件函数
on 函数只能绑定 js 原生的 例如 hover 无法绑定
$("div").on("click", function() {alert("1")
})
// 或者是这种 用变量来进行代替
var a = "click"
$("div").on(a, function() {alert("1")
})

统一使用 on 函数绑定 给未来元素 (进入页面没有 后来通过程序生成的) 绑定事件 可以绑定多种事件类型 用空格隔开

第一个参数：事件类型 第二个参数：元素选择器 第三个参数：事件函数

on 函数只能绑定 js 原生函数

已有元素找未来元素 要求已有元素包含未来元素

$("div"// 即此处括号里的必须是进入页面就有的).on("click", "div",function() {alert("1")
})

其他

去掉前后多余空格 无法去除中间的空格 .trim()

.style.textDecoration：中划线

confirm(xxx) 弹出弹框如果选择的是确定 会有返回值 返回值是 true 选择的是取消返回值是 false

substring(start,end) 以下标为基准 要头不要尾 如果只写了一个数字就是从开始一直到结束

indexOf(“”)判断有没有字串 如果有返回第一个子串的的第一个位置 没有返回 -1

indexOf(“”，n)跳过 n 个元素 判断有没有字串 如果有返回第一个子串的的第一个位置 没有返回 -1

lastIndexOf(“”)判断有没有字串 如果有返回最后一个子串的的第一个位置 没有返回 -1

split(“”) 把一个字符分割成字符串数组 返回一个字符串数组 如果把空字符串作为参数 则会把每一个字符都分割