jQuery和Vue
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文件夹的内容到自己服务器
jQuery和Vue的更多相关文章
- jquery和vue对比
1.jquery介绍:想必大家都用过jquery吧,这个曾经也是现在依然最流行的web前端js库,可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替,随着浏览器厂商对HTML5规范统一遵 ...
- jQuery和Vue的区别
1.jQuery和Vue的区别 jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起 ...
- jQuery到Vue的迁移之路
背景 在前段时间做了L10的某个超复杂超多坑的三端专题之后,组里的小伙伴们一致认为是时候想办法统一一下组里的开发模式了.因为用nie那一套jQuery/zepto(下文jQuery默认包括zepto) ...
- php开发面试题---jquery和vue对比（整理）
php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...
- jQuery与Vue的区别、从jQuery到Vue框架优点总结
一.两者的区别 1.数据与视图分离 2.数据驱动视图 二.从jQuery到Vue框架的总结 1.数据与视图分离,解耦 2.数据驱动视图,只关心数据,DOM操作已经被框架封装
- 学习js、jquery、vue实现部分组件
通过js实现radio小组件,最终效果如下 html代码: <!DOCTYPE html> <html lang="en"> <head> &l ...
- python工业互联网应用实战18—前后端分离模式之jquery vs vue
前面我们分三章来说明了使用django template与jquery的差别,通过jquery如何来实现前后端的分离,同时再9章节使用vue.js 我们浅尝辄止的介绍了JQuery到vue的切换,由于 ...
- vscode前端常用插件推荐，搭建JQuery、Vue等开发环境
vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器.当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,edit ...
- jQuery与vue分别实现超级简单的绿色拖动验证码功能
jquery的绿色拖动验证功能 在网上看到了一个这样的问题:那种像拖动滑块匹配图形的验证方式是怎么实现的?. 突然想到实现一个简单绿色拖动验证码的功能,在网上搜了下,有一个用jquery实现的该功能代 ...
- 前端向服务器请求数据并渲染的方式（ajax/jQuery/axios/vue）
原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result
随机推荐
- BOM主要对象属性方法总结
BOM window对象 浏览器实例,全局对象 1.窗口位置: screenTop,screenLeft(screenX,screenY):窗口相对于屏幕左边和上边的位置 moveTo(x,y):将窗 ...
- UVA297：Quadtrees（四分树）
题目描述 四象树是每个内结点均有4个子结点的特殊四叉树,它可用于描述平面上黑白图像.平面上的黑白图像是32行×32列的正方形,每个格子称为1个象素,是最小的图像单位.正方形图像可分成四个相等的小正方形 ...
- echarts 百度地图 json
百度ECharts地图Json数据在线下载 最近需要写一个echarts地图统计表,苦于弄不到对应的地图json文件, CSDN 上下载的很多不完整或者不能用,功夫不负苦心人找到了这个. 阿里云地图选 ...
- Docker 部署mysql
目录 Docker 部署mysql 步骤 1.查找 Docker Hub 上的 MySQL 镜像 2.docker pull mysql 拉取镜像 3.运行容器 4.查看容器启动情况 使用命令备注 D ...
- 用Eclipse 开发Dynamic Web Project应用程序
一.创建Server通过菜单选择File > New > Other>Server,创建Server,如下图所示. 二.创建Dynamic Web Project项目 1.菜单选择F ...
- poj2135 最小费用流
添加超级源点(与点1之间的边容量为2,权值为0)和超级汇点(与点N之间的边容量为2,权值为0),求流量为2的最小费用流.注意是双向边. #include <iostream> #inclu ...
- java错误笔记
错误1. Description Resource Path Location Type The superclass "javax.servlet.http.HttpSer ...
- GetDC(),ReleaseDC()
用GetDC()得到的DC, 必须调用ReleaseDC()用CreateDC()创建的DC, 必须调用DeleteDC() 两者是不能混淆的.一种典型的错误代码如下:CDC* pDC = GetDC ...
- DRP项目
DRP(distribution resource planning)分销资源计划是管理企业的分销网络的系统,目的是使企业具有对订单和供货具有快速反应和持续补充库存的能力.解决了随着企业销售规模的逐渐 ...
- COGS 2211. [BZOJ3653]谈笑风生
★★★★ 输入文件:laugh.in 输出文件:laugh.out 简单对比时间限制:3 s 内存限制:512 MB [问题描述] 设T 为一棵有根树,我们做如下的定义: • 设a和b ...