jQuery
概述
是js的一种函数库有美国人 John Resig编写
特点
写的少,做的多,国内用的jq1.0版本,可以兼容低版本的浏览器,支持链式编程或链式调用和隐式迭代
链式编程
$(this).siblings().slideDown()
$(this).siblings().parent().siblings().children("ul").slideUp();
# 头一样的代码可以拼接在同一行
$(this).siblings().slideDown().parent().siblings().children("ul").slideUp();
隐式迭代
eg:10个button被点击时
$("button").click(function(){
alert("btn")
alert($) 返回一个匿名函数
})
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
<button></button>
入口函数
$() ===> document.getElementById()/
$(this)
$("#btn")
存放一个html标签
$("<div>
<p>
哈哈哈
</p>
<div>")
第一种(不常用)
$(document).ready(function(){
//执行的代码块
alert(1);
})
第二种(全代码)
<style>
div{
width: 100px;
height: 100px;
background: pink;
/* display: none; */
}
input{
width: 50px;
height: 30px;
background: green;
border: 1px black solid;
outline: none;
}
</style>
<script src="./jQuery/jquery-1.12.4.min.js"> </script>
<script>
// 这是入口函数的开始地方
$(function(){
$("#btn").click(function(){
$("div").toggle(500);
})
})
</scrip
</head>
<body>
<!-- <label for="">点击按钮</label> -->
<label for="">按钮</label>
<input type="button" id="btn">
<div></div>
</body>
jq控制html
$(function(){
alert($('div').html());
alert($('div').html(哈哈));
alert($('div').html("<p>123</p>"));
})
<div>测试</div>
jq控制css
$(function(){
alert($('div').css("color","red"));
alert($('div').css("color"));
alert($('div').css({'color':'red',"font-size":'25px'}));
})
<div>测试</div>
js常用的选择器方法
this 关键字 代指当前发生动作的那个标签(事件)
html() 获取内容
stop() 停止之前的事件
index() 索引值
show() 显示
hide() 隐藏
toggle() 双向性
addClass() 添加类
removeClass() 删除类
toggleClass() 双向性
jq中常用的选择器
第一种
和CSS中的选择器一样
$(".mydiv,#btn,p")
第二种
选择出来之后的元素进行筛选
has() 选中父级执行命令 eg: <div> <p>hahha </p> <span> heheh</span></div> 执行的是div标签
not() 除()的其他的都可以
eq() 获取下标一般和index()绑定来使用
第三种
选择出来之后的元素进行转移
prev() 上面的一个
prevAll() 上面的所有
next() 下面的一个
nextAll() 下面的所有
parent() 父级
siblings() 兄弟级
children() 孩子级
find() 选中父级执行命令 eg: <div> <p>hahha </p> <span> heheh</span></div> 执行的是p标签标签
first()
last()
动画效果
animate() 其中有四个参数
第一个参数 以字典的形式存储{"width":500,"font-size":20}
第二个参数 延时时间默认400ms
第三个参数 曲线函数(swing(变速)/linear(匀速))
第四个参数 是一个回调函数俗称(匿名函数)function(){"opacity":0.6} 存放当前动画结束后要发生的事件
slideUp() 向上卷起
slideDown() 向下展开
slideToggle() 双向性
fadeIn() 淡入效果
fadeOut() 淡出效果
fadeToggle() 双向性
fadeTo(0.2) 设置透明度为0.2
访问已有的属性
prop() 获取属性 prop("href") 获取href的值
prop("href","http://www.baidu.com") 修改其中的内容
访问自定义的属性
attr() 获取属性 attr("mycode") 获取mycode的值
val() 获取input标签的值,相当于prop("value")
each(function(event){}) 自带一个形参event是each的默认参数
和鼠标(mouse)事件有关的事件机制
blur() 失去焦点
focus() 获取焦点
change() 改变其中的内容
click() 点击事件
mouseover() 鼠标进入(包含子元素)
mouseout() 鼠标离开(包含子元素)
mouseenter() 鼠标进入(不包含子元素)
mouseleave() 鼠标离开(不包含子元素)
// hover 中的两个匿名函数mouseenter和mouseleave
hover(function(){},function(){})
ready()
submit() 数据提交
和键盘有关的事件
keyup() 弹起
keydown() 按下
表单提交 submit()
表单提交一般不会用$("from"),因为form标签有可能在一个页面有多个,为了保证唯一性,一般推荐使用id选择器$("#myform"),也不是直接提交的,需要加条件判断
$("#myform").submit(function(event){
if(aa && bb && cc ){
// 条件成立需要执行的代码块
alert("提交成功")
}
else{
// 阻止表单默认提交
return false
// event.preventdefault()
}
})
正则表达式(用的是原生js中的)
创建
var re = new RegExp(aa,bb) // aa 匹配规则,bb 正则的参数
var re = /匹配规则/正则的参数
正则变量.test(数据)
// 获取input框中的内容
var re = /^w{6,20}$/ // 匹配用户名输入是否是合法的标识符
var vals = $("#input01").val()
// 验证正则能否成功匹配
re.test(vals)
事件冒泡
是一种客观存在的现象，父子级标签且都绑定相同的事件,触发子级命令的时候会逐层传递到父级
如何阻止事件冒泡的行为
$("#btn").click(function(event){
// event.stopPropagation() 不推荐使用
return false
})
事件委托
一般都委托给这个标签的父标签(指的是一般不会发生改变的父标签)
delegate()中有三个参数
注:第一个参数和第二个参数都以字符串的形式存在
第一个参数
事件正实发生在谁身上
第二个参数
事件属性(click,mouseover)
第三个参数
匿名函数function(){}
优点
提高代码的执行效率
可以给未来元素绑定命令(指的是用程序增加的标签命令)
eg:
$("ul").delegate("li","click",function(){
alert($(this).index());
})
<ul>
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
...
</ul>
on() 只可以给未来元素绑定命令
有两个参数
第一个参数
事件属性
第二个参数
匿名函数function(){}
节点操作
js内置的DOM
是一种内置的结构化的表现手法,通过这个结构化表现手法把所有的标签实现了一个倒树状结构图
如下图
DOM(document object model) 文档操作模型
标签 = 元素 = 标记 < 节点(标签,标签的属性,标签的内容)
常见的节点操作的方法
html() 比较强大
下面的()中写的都是要操作的元素
append() 子级的后面追加
prepend() 子级的前面追加
after() 同级的后面追加
before() 同级的前面追加
下面的()中写的是要往哪个地方添加(目的地)
appendTo()
prependTo()
insertAfter()
insertBefore()
remove() 删除
empty() 清空
eg:
第一步:声明变量保存节点数据
第二步:使用追加函数将节点追加到相应的位置
var $li = $("<li>hhaha</li>")
$("ul").append($li)
$li.appendTo($("ul"))
<div>
// 第四个增加的位置 before()/insertBefore()
<ul>
// 第二个增加的位置 prepend()/prependTo()
<li></li>
// 第一个增加的位置 append()/appendTo()
</ul>
// 第三个增加的位置 after()/insertAfter()
</div>
原生的JS对象
创建的方式
第一种方式
var pre = new Object()
pre.name = "zhangsan"
pre.age = 25
pre.say = function(){
// 方法的定义
alert("hhaha")
}
alert(this.name)
pre.say()
第二种方式
var obj = {
"name":"laowang",
"age":25,
"say":function(){
// 定义方法
alert("hahha")
}
}
Vue框架
是js中的一种函数库,相比于jQuery来说特别丰富,俗称框架,是一种以数据为导向且语法特别灵活,方便我们使用
vue的使用是从new一个对象开始的 var vue = new Vue({})
如下
<script>
window.onload = function()
{
// 创建一个Vue对象
var vue = new Vue(
{
// el:"#btn" vue要控制的标签相当于$("#btn"),实际是选择器
el:"#app", // 只要绑定#app,#app所包裹标签中想用的值如果在data字典中都可以用
// 存储vue数据,以字典的形式
data:
{
// 存储变量
str:"qwertyuiop",
data1:100,
num:0,
bool1:true,
bool2:false
},
mounted:function()
{
// 当界面刷新时,执行的函数
}
filters:
{
// 局部过滤器 管道 "|" 用来格式化文本
yuan:function(args)
{
return args + "元"
}
}
methods:
{
// 定义方法,是一个匿名函数
funcAdd:function(num1,num2)
{
ret = num1 + num2
console.log(ret)
}
},
computed:
{
// 计算属性,命令必须是返回值 是一个匿名函数
funcReverse:function(){
var ret = this.str.split('').reverse().join('')
return ret
}
},
watch:
{
// 侦听属性名(侦听的变量是谁,就是那个名字)
num:function(newVal,oldVal){
console.log(oldVal + '|' + newVal)
}
}
})
}
</script>
<body>
<div id="app">
{{ bool1?"OK":"NG"}}
// 可以控制很多的标签第一个div下的所有标签都可以控制
<p> {{data1}}
<div>
<span>哈哈哈哈</span>
</div>
</p>
{{ str.split("").reverse().join("") }}
</div>
</body>
胡子语法
是一种以{{ num }}的表现形式体现出来的
其中可以传表达式 || 条件 || 三元运算符
常见的样式
<a v-bind:href="url1">百度</a> data:{url1:"htttp://www.baidu.com"}
简写格式
<a :href="url2">淘宝</a> data:{url2:"htttp://www.taobao.com"}
<button v-on:click="num += 1"></button> data:{num:0}
<button @click="funcAdd(num1,num2)"></button> // ()中如果没有参数()可以省略不写,但有参数一定要传参,要写()
methods:
{
funcAdd(num1,num2)
{
ret = num1 + num2
console.log(ret)
}
}
funcAdd:function(args){
console.log(args)
// 访问服务器的url
axios({
url:'/add_data',
method:'get',
dataType:'text',
params:{"code":args} // 传参关键字必须是params
})
.then(function(ret){
alert(ret.data)
// console.log(ret)
})
.catch(function(){
alert("请求失败")
})
}
vue中-->只要数据变,页面视图就变,以数据为导向,用来绑定修改数据而jQuery中是以元素为导向的,用来操作元素的属性
v-xxxx 是一种指令,具备特殊的功能语法,和胡子语法搭配使用
v-bind:/: 用来修饰属性
v-on:click/@click/mouseover/mouseout/ .... = "function(){}" 事件机制
三元运算符
(var result == "OK")?'完成':'未完成'
多种条件判断
v-if=""
v-else-if=""
v-else=""
v-show="" bool值数据类型,true显示,false隐藏 display:none;
用来遍历和获取属性
v-for="(data,index) in list"
用来访问表单中的数据,进行双向绑定
v-model=""
多选/复选
<div id="app">
性别：
<input type="radio" v-model='myradio' value="nan">男
<input type="radio" v-model='myradio' value="nv">女
<div>
兴趣爱好：
<input type="checkbox" value="sleep" v-model='list1'>睡觉
<input type="checkbox" value="surf" v-model='list1'> 上网
<input type="checkbox" value="code" v-model='list1'>敲代码
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
myradio:'nan', // 默认值
list1:['surf'] // 里边的值全是默认值
}
})
</script>
事件冒泡
@click.stop.prevent="num+=1"
过虑器 管道符号 "|" 用来格式化文本
filters:{
// 局部过滤器
func:function(aa){
if(this.aa == 0){
return aa
}
var result = aa + '元'
console.log(result)
}
}
Vue.filter(过虑器的名字,function(aa){
// 全局过虑器
if(this.aa==0){
return aa
}
var result = '￥' + aa
console.log(result)
})
监听属性
watch:
{
// 侦听属性名(侦听的变量是谁,就是那个名字)
num:function(newVal,oldVal){
console.log(oldVal + '|' + newVal)
}
}
自定义属性
Vue.directive(指令名用户自定的){
inserted:function(el,binding){
// 回调函数(钩子函数)需要执行的内容
}
}
Es6/Es2015 2015年更新的
定义变量的关键字
var
let
const
箭头函数
用来解决this指向问题的作用,如果用this.num获取到一个objct.window()时,需要将该函数改写成箭头函数
原来的匿名函数
var func = function(dat){
this.num = dat.data
}
改装成箭头函数
var func = dat => {
this.num = dat.data
}
对象的精简
var name = "laowang
var ovue = new Vue({
el:'#app',
data:{
name, // 相当于name:name,此name非彼name
}
})
文件的组件
单文件的组件
demo_func.vue // 单文件组件的文件
html <template> content </template>
css <style> content </style>
js <script> content </script>
多文件组件
效果等同于python中的封装,
模块的导入和导出(import/export)
a.先导出,在导入,才能使用
b.最后加载到当前需要使用的那个模块
node.js服务
启动服务 npm run dev
认识webpack目录的各个文件的作用
build //打包要用的配置文件
config //webpack服务环境的配置文件
dist //将来打包生成的文件（上传的文件）
node_modules //模块
src //前端开发的目录
components //组件 **** 找对应组件放对应的数据
route //路由跳转页面
App.vue // webpack最大的组件
static -- 静态文件：css js
index.html -- 首页
跨域请求数据
a. src文件夹main.js粘贴：
import axios from 'axios'
Vue.prototype.axios = axios
b. config/index.js 的proxyTable粘贴
// 配置跨域代理
// apis 自定义的代理名
'/apis': {
// 代理的服务器
target: 'http://localhost:7890',
// 允许跨域
changeOrigin: true,
pathRewrite: {
'^/apis': ''
}
c. 重启服务
d. 请求数据
this.axios({
url:'/apis/index_data',
})
打包上线
a. 去掉接口的代理名/apis
b. 停止服务
c. num run build
d. 复制dist文件夹的内容到自己服务器