javascript jQuery

javascript与html结合

1. 内嵌 在头部<script></script>

2. 外引 新建一个.js文件 <script src=“资源路径”></script>

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 = "<a herf=' '>跳转</a>" 把修改的内容当作标签处理

   value 收集用户信息的标签

2. 修改属性

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

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

3. 修改样式

   aa.style.样式 = “ ”

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

   也可以在头部写style属性

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

 添加元素

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

<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("") 把一个字符分割成字符串数组 返回一个字符串数组 如果把空字符串作为参数 则会把每一个字符都分割