javascript jQuery

javascript与html结合

内嵌在头部<script></script>
外引新建一个.js文件 <script src=“资源路径”></script>
无法同时使用两个方法但允许多次书写来进行弹框显示

延迟加载

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:{//允许对象嵌套
	}
}

函数

.定义函数 funtion:定义函数的关键字 (参数列表)
命名函数：function 方法名(变量，变量){函数体}
匿名函数：var aa = function(a,b){} (因为是黑户所以要用变量来进行引用)
使用函数
函数调用

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

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

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

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

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

使用变量

弹框打印 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)

查找

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

var a = document.getElementById("aa")

括号里“aa”是id名称需要注意的是在.html中如果是在头部放的script 要加上defer属性不然遇到script会直接进入无法找到下方的aa id 或者也可以将script放在body的最下方
根据class获取元素可以返回所有符合条件的对象组成的数组

var a =document.getElementsByClassName("aa")

输出是console.log(a[元素位置]) a相当于是一个数组
根据元素名称(标签名称) 获取元素返回所有符合条件的对象组成的数组

var a =document.getElementsByTagName("div")

输出是console.log(a[元素位置])
根据选择器css获取元素返回符合条件的第一个对象

var a = document.querySelector("div")
根据选择器获取元素 querySelectorAll() 返回所有符合条件的对象组成的数组

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

父级 .parentNode parentElement(找此标签的父标签)
子级 children(子标签) childNodes(含文本区即每个标签和每个标签之间的内容包括父标签和子标签)
第一个孩子 firstChild==childNodes[0]（内容区）firstElementChild 第一个标签 last同理
下一个同级弟弟元素nextSibling(含文本) nextElementSibling(不含文本)
上一个哥哥元素 previousSibling previoElemenSibling

修改

修改内容

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

aa.innerHTML = "<a herf=' '>跳转</a>" 把修改的内容当作标签处理

value 收集用户信息的标签
修改属性

原生属性 aa.id = ""; aaa.className = '''

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

修改样式

aa.style.样式 = “ ”

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

也可以在头部写style属性

<style>
        .text{
            background: pink;
        }
    </style>
//但要结合使用
在js中
aa.className = "test
在本体中
<div class="test">aaa</div>

添加元素

创建元素：var div= document .createElement("div")

复制

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

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

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

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

.replaceChild(新元素，要被替换掉的元素):替换掉节点
删除元素找到父级调用删除的方法

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

p.parentNode.removeChild(p)

JQuery

<script src="JQuery/jQuery.js"></script>//不能加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("") 把一个字符分割成字符串数组返回一个字符串数组如果把空字符串作为参数则会把每一个字符都分割