js++

最新推荐文章于 2024-08-22 17:31:31 发布

zhuoyunpeng

最新推荐文章于 2024-08-22 17:31:31 发布

阅读量538

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/zhuoyunpeng/article/details/100731408

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

js
变量类型
数字 number 字符串string 数组字典
parseInt(age) 转换为数字类型不成功则NAN
parseFloat()age 转换成浮点数
a=“liveion”
a.charAt(2) 获取元素
a.substring(起始位置，初始位置)
a.length() 获取当前长度
a.trim() 移除空白
a.trimLeft() 移除左空白 a.trimRight() 移除右空白
a.concat(“b”) 字符串拼接
a.indexOf(b) 获取子序列位置没有则返回-1
a.slice() 切片
a.toLowerCase() 大写 a.toUpperCase() 小写
a.split(分割字符串，拿到几个分割后的值)
定时器 setInterval(函数，时间)

数组------
a.push(b) 尾部添加值
a.pop() 删除并返回数组的最后一个元素
a.unshift() 头部插入元素
a.shift() 头部删除元素
a.splice(起始位置，删除数据，插入一个值)
a.slice(切片)
a.reverse() 反转倒叙
a.join(符号连接) 将数组连接起来构成一个字符串
a.concat() 连接数组
a.sort() 排序

DOM--------------------
获取元素
docment.getElementById(“i1”)
docment.getElementsByName(“name”)
docment.getElementsByTagName(“div”)
docment.getElementsByClassName(“c1”)
间接找到标签
tag=docment.getElementById(“i1”)
parentElement 父标签
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
docment.getElementById(“i1”).innerText=“新内容”
1 innerText
标签.innerText 获取文本内容
标签.innerText=“xx” 对标签内文本进行重新赋值
2 tag.className=“c1”
tag.classList 样式列表
tag.classList.add(“样式名”) 添加指定样式
tag.classList.remove(“样式名”) 删除指定样式
disabled 禁用按钮
a阻止超链接跳转 return false
onmouseover 鼠标放上去
onmouseout 鼠标离开
onfocus 获取焦点
onblur 失去焦点
javascript 三部分
1 ECMAScript 基本语法
2 DOM document object model 文档对象模型，操作浏览器元素
3 BOM browser object model 浏览器对象模型，操作浏览器的
window 顶级对象
window.name
window.οnlοad=function(){
页面加载完触发
}
window.οnunlοad=function(){
页面关闭完触发
}
console.log() 打印
alert() 弹出框
confirm()确认框
location.href 获取当前url
location.href=“baidu.com” 跳转重定向
location.href=location.href 刷新一下
location.reload() 刷新一下

 location.href 获取url
 location.href="baidu"  跳转 重定向
 location.href=location.href

--------定时器
setInterval(函数，时间毫秒)
clearInterval() 清除定时器
setTimeout(函数，时间毫秒) 一次性定时器
clearTimeout() 清除一次性定时器
jQuery
类库（python叫模块）
DOM/BOM/JavaScript
一查找元素
二操作元素
jquery. $. 转换： j q u e r y 对象 [0] > > > D O M 对象 D O M 对象 > > >$ (DOM对象)
选择器
1 id $("#id")
2 class $(".c1")
3 $(“a”)
4组合选择器
$(“a,.c1”)所有a标签和c1标签
$(“a”)
5 层级选择器
$("#i1 a") i1里面的所有a标签子子孙孙
$("#i1>a") 只找儿子
基本筛选器
$(“a:first”) 找到所有a标签里面的第一个元素
$(“a：not（）”) 不选中
$(“a:even”) 计数 odd偶数
$("") eq()索引 gt() lt()大于多少小于多少
：last 最后一个

...

属性选择器
$("[alex]") 具有alex属性标签
$("[alex=“123”]") alex属性等于123标签
表单
$(“input[type=‘text’]”)
$(":text")
筛选器
.next() 下一个标签
.prev() 上一个标签
.parent() 找父标签
.children() 所有孩子标签
.siblings() 获取所有兄弟标签
.find(“属性”) 查找元素
.index() 获取索引位置
.eq() 遍历加数字就是索引
first() last() hasClass(class)
nextAll() nextUntil("#i1") 向下找找到哪里停止
parents() parentsUntil("#i1") 向上找到哪里停止
disabled 不可编辑的
enabled 可编辑的
$(":checkbox").prop(“checked”) 获取checked值
$(":checkbox").prop(“checked”,true) 全选设置值
$(":checkbox").prop(“checked”,false) 反选设置值
$(":checkbox").each() 循环元素
this DOM对象，代指当前循环元素
三元运算
var v = 条件？真值：假值
click 绑定
添加样式
$("#i1").addClass(“hidden”)
移除样式
$("#i1").removeClass(“hidden”)
$("#i1").toggleClass(“hide”) 有就去掉，没有就加上hide
$("#i1").hasClass(“hide”) 返回true false
显示隐藏标签 display：none
.show() 显示 .hide() 隐藏
****文本操作
$().txet() 不写就是获取值只是文本
$().txet(xx) 赋值
$().html()
$().html(xx)
$().val() 获取value值
$().val(xx) 赋值
-------属性操作----
$().attr(属性，值)
一个参数获取属性值，两个参数是设置属性值
$().removeAttr(属性) 删除值
-----专门操作–
$().prop(“checked”,true) 专门用于checkbox radio
--------文档处理-----
$().append() 添加到最后面
$().prepend() 添加到最前面
$().after() 添加到当前标签后面同级
$().before() 添加到当前标签前面同级
$().remove() 删除当前标签
$().empty() 删除当前标签值，但是标签没有删除
$().clone() 克隆
---------css处理----
$().css(“color”,“red”)
document.createElement(“span”) 创建标签
---------位置—
$(window).scrollTop() 获取值
$(window).scrollTop(参数) 设置滚轮值
offset 指定标签在文档中的坐标
$().offset() 获取指定坐标 .left .top
---------绑定事件------
DOM 3种
1标签中绑定 2js代码中绑定 3事件监听函数对dom绑定
οnclick= click .addEventListener(“click”,函数)
jquery对象
$(".c1").click()

	 $(".c1").bind("click",函数）
	 $(".c1").unbind("click",函数）
 
	 $(".c1").delegate("a","click",函数)
     $(".c1").undelegate("a","click",函数)
	   注意：此方法委托，点击才绑定执行，添加元素具有同样功能
 
	 $(".c1").on("click,函数")
	 $(".c1").off("click,函数")
 --------事件执行---
	 onclick="return cli()"  dom需加return
		 return false     阻止事件发生
	 自定义属性

s-2
display：none 默认没有
全选反选以及取消
οnclick=“函数”
后台菜单
最小宽度
min-width
min-height
border-radius：50%

 for(var x in [11,22,33]){
	console.log()
 }
 a = [11,22,33]
 for(var i=0;i<a.length;i++){
 }
 while(){
 }
 break continue
 if(){}else if(){}else{}
 ===   ==
 switch(name){
	case  "1":
		console.log();
	case  "2":
		console.log();
	default:
		console.log();
 }
 函数
普通函数
	 function fun(){
	 
	 }
 匿名函数
	 function(){}
 自执行函数，创建完成并且自动执行
 (function(a){
	console.log(a);
 })
 (参数)
 常用 序列化
 li=[11,22,33]
 JSON.stringify(li) 将对象成字符串
 JSON.parse()将字符串转换为对象类型
 转义
 url  decodeurl()   encodeurl()
 ***eval***  eval(表达式/执行代码)
 ***时间对象***
 Date对象
 var d = new Date()
    d.getxxx  获取
	d.setxxx  设置
 **作用域***作用链
	函数内部变量  undefined 未定义
 ***面向对象*
	this.name   this代指对象相对于python里面的self
 创建对象
 var a = new fun()  必须加new
 原型
 function Foo(){
	 this.name=n;
 }
 Foo.prototype = {
	 "sayName":function(){
		 console.log(this.name)
	 }
 }
 ***DOM***
 直接找document.getElementById()
 获取文本 
 innerText  只获取文本
	 innerHTML  获取全部内容
     value   input  获取当前标签中的值
		     select  获取选择的value值
					selectedIndex  操作
			 <textarea></textarea>  多行文本
	 onfocus="Focus"  获取光标
	 onblur="Blur"    移除光标
	 placeholder="你好啊"
 样式操作
	 className
	 classList
		 classList.add()
		 classlist.remove()
	 obj.style.color="red"
 属性操作
 obj.attributes  获取所有属性
 obj.setAttribute("key","value") 属性操作添加
 obj.removeAttribute("value")    属性操作 删除
 创建标签并添加到HTML中
 1   对象的方式
	 var tag = document.createElement("input");
		tag.setAttribute("type","text");
		tag.style.color="red";
 2   字符串方式
	 var tag ="<input type="text" />";
   appendChild() 添加标签
 docment.getElementById("i1").insertAdjacentHTML("beforeBegin",tag)
 beforeBegin  beforeEnd  afterBegin afterEnd
 提交表单
 <a onclick="baidu.com">提交</a>
  <script>
  docment.getElementById("i1").submit()
  </script>
 ***其他***
 console.log()  打印
 alert()   弹出框 
 confirm()确认框
 location.href 获取当前url
 location.href="baidu.com" 跳转 重定向
 location.href=location.href  刷新一下
 location.reload()  刷新一下
 var obj = setInterval("函数"，时间) 多少时间执行函数
 clearInterval(obj)  清除定时器
 var ob = setTimeout("函数"，时间)   只执行一次
 clearTimeout(ob)  清除定时器
 ***事件***
 onclick onblur onfocus
 onmouseover   onmouseout

--------offSet—获取元素样式
.offSetWidth
.offSetHeight
.offSetLeft
.offSetTop
没有脱离文档流
---------scroll滚轮
scrollWidth 内容宽
scrollHeight 内容高
onscroll 滚动事件
overflow：hidden 隐藏
overflow：auto 自动滚轮

 client 可视区域

--------函数-----
构造函数实例对象原型
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.eat=function(){}
var pre = new preson()
constructor 构造器
原型：共享数据，节省空间实现继承
原型中的方法是可以互相访问的
实例对象使用的属性或者方法先在实例中查找，
找不到就去构造函数的原型对象里面去找
实例对象中的原型，指向构造函数中的原型
实例对象的__proto__原型。浏览器使用的
构造函数中的prototype原型，程序员使用的
原型链：是一种关系，实例对象和原型对象之间的关系，是通过__proto__来建立关系的
原型对象方法中this就是实例而对象
实例对象__proto__原型—构造函数的原型prototype
构造函数prototype的__proto__原型指向----object的prototype原型
object的__proto__指向null
------面向对象的特征—
封装继承多态
封装：属性方法相同或类似的功能放在一起
继承：js中没有类，但是可以通过构造函数模拟类，继承为了数据共享
多态：一个对象有不同的行为，或者同一个行为针对不同的对象产生不同的结果
要想有多态，就要有继承，js中可以
改变原型指向继承：
借用构造函数继承：
构造函数.call（this,属性…）,属性可以继承，但是方法不能继承
组合继承：原型继承+借用构造函数继承
拷贝继承：
---------this—
普通函数this指向window
setInterval 指向window
对象。方法中this指向实例对象
原型中this’指向实例对象
”use strict“ 严格模式

 函数.apply（对象，数组）  函数.call（对象，参数1，参数2...）
 运行函数，函数调用，改变this指向
 注意参数传递的方式不一样
 bind方法复制的意思
 var f=f1.bind(对象，参数1，参数2.。。)

-------闭包—
概念：函数A中有函数B,函数B中可以访问函数A的
变量或数据，同时函数A中return 函数B中可以访问函数A的
------浅拷贝
深拷贝
-------正则表达式
text 判断字符串是否符合规定的正则
exec 获取匹配的数据
rep = /\d+/;
rep.text("字符串“）
/^d+$/ ^开始 $结尾
/…/
/…/g 全局匹配
/…/i 忽略大小写
/…/m 匹配多行

------EasyUI BootStrap
v-else=""
v-show=“sex” 元素存在，只是隐藏了
v-for=“item in list”
1.0版本
v-for="(index,item) in list"
1.0对象不可用index 唯一性 track-by=“$index”
2.0版本唯一性使用 :key=“index”
v-for="(item,key) in list"
v-for="(item,key,index) in list"
v-bind:href=“url”
v-on:click=“函数”
v-on="{mouseenter:onenter,mouseleave:onleave}"
v-on="{多个事件}"
三元法则条件？真：假
计算属性：computed 有缓存提高性能区别methods
var vm = new Vue({
el:"#app"
data:{
name:“雷锋”,
sex:""
list:[“葱”,“酱油”,“大蒜”],
url:“http://baidu.com”

})
-------vue
vue-cloak 解决插值表达式闪烁问题
v-text="" 没有闪烁问题，但会覆盖原来的内容
v-html="" 输出html格式
v-bind:title=“msg” 绑定指令简写：冒号
v-on:click=“xx” 绑定事件缩写 @
事件修饰符
.stop 阻止冒泡
.prevent阻止默认行为
.capture 捕获机制
.self 只有当点击事件本身时候才出发，没有捕获和冒泡
.once 事件只出发一次
v-modle双向数据绑定，只能用于表单元素中
:class="[‘a’,‘b’]" class类的样式
v-for=“item in list” {{item}} for循环
注意使用for时需要加v-bind：key=“”
="" key属性只能使用数字或者字符串
定义过滤器
Vue.filter(“过滤器的名称”，function（）｛｝)