专门做瑜伽的网站,网站建设教程小说简介,iis 网站打不开,做网站需要交印花税目录
JS概述
基本语法
数据类型内置方法
DOM对象
查找标签
绑定事件
操作标签
jQuery
查找标签
绑定事件
操作标签
Ajax请求
数据接口
前后端分离
ajax的使用 JS概述
一门弱类型的编程语言,属于基于对象和基于原型的脚本语言. 1 直接编写scriptconsole…目录
JS概述
基本语法
数据类型内置方法
DOM对象
查找标签
绑定事件
操作标签
jQuery
查找标签
绑定事件
操作标签
Ajax请求
数据接口
前后端分离
ajax的使用 JS概述
一门弱类型的编程语言,属于基于对象和基于原型的脚本语言. 1 直接编写scriptconsole.log(hello yuan)/script
2 导入文件script srchello.js/script 基本语法
通过代码来进行学习把
// 1变量声明赋值
var x 10; // 如果不写var则是全局变量// 2数据类型
var age 10
var name yuan
var isMarried false
var names [rain,eric,yuan]
var info {name:yuan,age:18,isMarried:false}var info2 {name: yuan,age:22,sex: true,son: {name:alex,age: 38},hobby: [篮球,唱,跳]
}// 3运算符- * / . . . !|| !// 4流程控制语句// 分支语句
if(条件){// 条件为true时,执行的代码}else{// 条件为false时,执行的代码} switch(条件){case 结果1:// 满足条件执行的结果是结果1时,执行这里的代码..break;case 结果2:// 满足条件执行的结果是结果2时,执行这里的代码..break;...default:// 条件和上述所有结果都不相等时,则执行这里的代码}// 循环语句
while(循环的条件){// 循环条件为true的时候,会执行这里的代码}
// 循环三要素
for(1.声明循环的开始; 2.条件; 4. 循环的计数){// 3. 循环条件为true的时候,会执行这里的代码
} // 5函数function add(x,y){return x y
}
add() 数据类型内置方法
字符串内置方法
var str hello world;
console.log( str.length );
str.toUpperCase()
str.toLowerCase()
str.slice(3,6);
str.split( );
str.trim();
数组内置方法
var arr [1,2,3,4,5];
arr.push(6); // 给数组后面追加成员
arr.pop(); // 删除最后一个成员作为返回值arr.shift() // shift是将数组的第一个元素删除
arr.unshift(0) // unshift是将value值插入到数组的开始var arr [a,b,c];
arr.splice(1,1);
arr.splice(1,0,b)
arr.splice(1,1,B)arr.reverse();// slice(开始下标,结束下标) 切片,开区间
arr.slice(1,3)// filter() 高阶函数, 对数组的每一个成员进行过滤,返回符合条件的结果
var arr [4, 6, 5, 7];function func(num) { // 也可以使用匿名函数或者箭头函数if (num % 2 0) {return num;}
}var ret arr.filter(func); // 所有的函数名都可以作为参数传递到另一个函数中被执行
console.log(ret);// map() 对数组的每一个成员进行处理,返回处理后的每一个成员
var arr [1, 2, 3, 4, 5];
var ret arr.map((num) {return num ** 3;
});
console.log(ret); // [1, 8, 27, 64, 125]序列化
方法描述JSON.stringify(obj)把obj对象转换成json格式字符串会移除对象方法JSON.parse(str)把符合json语法的字符串转换成js对象 DOM对象
DOM document Object Model 文档对象模型
// 整个html文档,会保存一个文档对象document
// console.log( document ); // 获取当前文档的对象 查找标签 直接查找标签
document.getElementsByTagName(标签名)
document.getElementById(id值)
document.getElementsByClassName(类名) 1、方法的返回值是dom对象还是数组 2、document对象可以是任意dom对象将查询范围限制在当前dom对象 导航查找标签
elementNode.parentElement // 父节点标签元素
elementNode.children // 所有子标签
elementNode.firstElementChild // 第一个子标签元素
elementNode.lastElementChild // 最后一个子标签元素
elementNode.nextElementSibling // 下一个兄弟标签元素
elementNode.previousElementSibling // 上一个兄弟标签元素 CSS选择器查找
document.querySelector(css选择器) //根据css选择符来获取查找到的第一个元素返回标签对象dom对象
document.querySelectorAll(css选择器); // 根据css选择符来获取查找到的所有元素,返回数组
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idi1DIV1/div
div classc1DIV/div
div classc1DIV/div
div classc1DIV/div
div classouterdiv classc1item/div
/div
div classc2div classc3ul classc4li classc5 idi2111/lili222/lili333/li/ul/div
/div
script
// 直接查找
var ele document.getElementById(i1); // ele就是一个dom对象console.log(ele);
var eles document.getElementsByClassName(c1); // eles是一个数组 [dom1,dom2,...]console.log(eles);
var eles2 document.getElementsByTagName(div); // eles2是一个数组 [dom1,dom2,...]console.log(eles2);
var outer document.getElementsByClassName(outer)[0];var te outer.getElementsByClassName(c1);console.log(te);
// 导航查找
var c5 document.getElementsByClassName(c5)[0];console.log(c5); // c5是一个DOM对象
console.log(c5.parentElement.lastElementChild); // 返回值是dom对象console.log(c5.parentElement.children); // 返回值是dom对象数组console.log(c5.nextElementSibling.nextElementSibling);console.log(c5.parentElement.children);
// css选择器
var dom document.querySelector(.c2 .c3 .c5);console.log(:::,dom);
var doms document.querySelectorAll(ul li);console.log(:::,doms);/script
/body
/html 绑定事件 静态绑定 直接把事件写在标签元素中
div iddiv onclickfoo(this)click/div
scriptfunction foo(self){ // 形参不能是this;console.log(foo函数);console.log(self); }
/script 动态绑定在js中通过代码获取元素对象,然后给这个对象进行后续绑定
p idi1试一试!/p
script
var eledocument.getElementById(i1);
ele.onclickfunction(){console.log(ok);console.log(this); // this直接用};
/script 一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码 多个标签绑定事件
ulli111/lili222/lili333/lili444/lili555/li
/ul
script
var eles document.querySelectorAll(ul li);for(var i0;ieles.length;i){eles[i].onclick function (){console.log(this.innerHTML)}}
/script 操作标签
标签名 属性1“属性值1” 属性2“属性值2”……文本/标签名 文本操作
div classc1spanclick/span/div
script
var ele document.querySelector(.c1);ele.ondblclick function (){// 查看标签文本console.log(this.innerHTML)// 设置标签文本this.innerHTML a href#yuan/a}
/script value操作
像input标签select标签以及textarea标签是没有文本的但是显示内容由value属性决定 input typetext idi1 valueyuan
测试代码
script
// input标签var ele1 document.getElementById(i1);console.log(ele1.value);ele1.onmouseover function (){this.value alvin}
/script css样式操作
p idi1Hello world!/p
scriptvar ele document.getElementById(i1);ele.onclick function (){this.style.color red}
/script 属性操作
elementNode.setAttribute(属性名,属性值)
elementNode.getAttribute(属性名)
elementNode.removeAttribute(属性名); 并不是所有属性都可以像value那样操作。 class属性操作
elementNode.className
elementNode.classList.add
elementNode.classList.remove
案例tab切换 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
style*{margin: 0;padding: 0;}
.tab{width: 800px;height: 300px;/*border: 1px solid red;*/margin: 200px auto;}
.tab ul{list-style: none;}
.tab-title{background-color: #f7f7f7;border: 1px solid #eee;border-bottom: 1px solid #e4393c;}
.tab .tab-title li{display: inline-block;padding: 10px 25px;font-size: 14px;}
li.current {background-color: #e4393c;color: #fff;cursor: default;}
.hide{display: none;}
/style
/head
body
div classtabul classtab-titleli classcurrent index0商品介绍/lili class index1规格与包装/lili class index2售后保障/lili class index3商品评价/li/ul
ul classtab-contentli商品介绍.../lili classhide规格与包装.../lili classhide售后保障.../lili classhide商品评价.../li/ul
/div
scriptvar titles document.querySelectorAll(.tab-title li);var contents document.querySelectorAll(.tab-content li);for (var i 0;ititles.length;i){titles[i].onclick function () {// (1) 触发事件标签拥有current样式for (var j 0;jtitles.length;j){titles[j].classList.remove(current)}
console.log(this);this.classList.add(current);
// (2) 显示点击title对应的详情内容var index this.getAttribute(index);// console.log(this.getAttribute(index));// console.log(contents[index]);
for (var z 0;zcontents.length;z){contents[z].classList.add(hide);}
contents[index].classList.remove(hide);}}
/script
/body
/html jQuery
jQuery是一个快速、简洁的JavaScript框架是继Prototype之后又一个优秀的JavaScript代码库或JavaScript框架。jQuery设计的宗旨是“write LessDo More”即倡导写更少的代码做更多的事情。它封装JavaScript常用的功能代码提供一种简便的JavaScript设计模式优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为具有独特的链式语法和短小清晰的多功能接口具有高效灵活的css选择器并且可对CSS选择器进行扩展拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器如IE 6.0、FF 1.5、Safari 2.0、Opera 9.0等
目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构
根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地
script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js/script
查找标签
/*
基本选择器 :
$(#id)
$(.class)
$(element)
$(.class,p,div)
后代选择器
$(.outer div)
筛选器$().first() $().last() $().eq() 导航查找
$(div).children(.test)
$(div).find(.test) // 向下查找兄弟标签
$(.test).next()
// 查找所有兄弟标签
$(div).siblings() // 查找父标签
$(.test).parent() */ 绑定事件
1. on 和 off
// 绑定事件
$().on(事件名,匿名函数)
// 解绑事件,给指定元素解除事件的绑定
$().off(事件名)
2. 直接通过事件名来进行调用
$().事件名(匿名函数) 操作标签 文本操作
$(选择符).html() // 读取指定元素的内容,如果$()函数获取了有多个元素,提取第一个元素
$(选择符).html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容 value操作
$().val() 属性操作
//读取属性值$(选择符).attr(属性名); // 获取非表单元素的属性值,只会提取第一个元素的属性值
//操作属性$(选择符).attr(属性名,属性值); // 修改非表单元素的属性值,如果元素有多个,则全部修改 css样式操作
获取样式
$().css(样式属性); // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
操作样式
$().css(样式属性,样式值).css(样式属性,样式值);
$().css({样式属性1:样式值1,样式属性2:样式值2,....}) class 属性操作
$().addClass(class1 class2 ... ...) // 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加 节点操作
$().append(content|fn) // $(p).append(bHello/b); Ajax请求
Ajax一般中文称之为阿贾克斯是英文 “Async Javascript And Xml”的简写译作异步js和xml传输数据技术。
ajax的作用 ajax可以让js代替浏览器向后端程序发送http请求与后端通信在用户不知道的情况下操作数据和信息从而实现页面局部刷新数据/无刷新更新数据。
所以开发中ajax是很常用的技术主要用于操作后端提供的数据接口从而实现网站的前后端分离。
ajax技术的原理是实例化js的XMLHttpRequest对象使用此对象提供的内置方法就可以与后端进行数据通信。 数据接口
数据接口也叫api接口表示后端提供操作数据/功能的url地址给客户端使用。
客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般增删查改】
同时在工作中大部分数据接口都不是手写而是通过函数库/框架来生成。 前后端分离
在开发Web应用中有两种应用模式 前后端不分离 前后端分离 ajax的使用
ajax的使用必须与服务端程序配合使用但是开发中我们对于ajax请求的数据不仅仅可以是自己写的服务端代码也可以是别人写好的数据接口进行调用。
数据接口
# 天气接口
https://v0.yiketianqi.com/api?unescape1versionv91appid43656176appsecretI42og6Lmextcityidcity
# 音乐接口
https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk5381uin0formatjsoninCharsetutf-8outCharsetutf-8%C2%ACice0platformh5needNewCode1tpl3pagedetailtypetoptopid36_1520777874472%E4%BD%9C%E8%80%85%EF%BC%9Atsia%E9%93%BE%E6%8E%A5%EF%BC%9Ahttps://www.jianshu.com/p/67e4bd47d981
