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
随机推荐
- python元组，列表，字典练习
#coding = utf-8 goods_data = (["iphone7",8000],["mac pro",12000],["bike&quo ...
- 三维BFS Poj 2251
#include <iostream> #include <cstdio> #include <string> #include <cstring> # ...
- Gym - 101810B ACM International Collegiate Programming Contest (2018)
bryce1010模板 http://codeforces.com/gym/101810 #include <bits/stdc++.h> using namespace std; #de ...
- (洛谷P2512||bzoj1045) [HAOI2008]糖果传递 || 洛谷P4016 负载平衡问题 || UVA11300 Spreading the Wealth || (洛谷P3156||bzoj3293) [CQOI2011]分金币
bzoj1045 洛谷P4016 洛谷P2512 bzoj3293 洛谷P3156 题解:https://www.luogu.org/blog/LittleRewriter/solution-p251 ...
- Zip-line Codeforces - 650D || 风筝
https://codeforces.com/contest/650/problem/D 原题? http://210.33.19.103/contest/1024/problem/2 4s 520M ...
- Java中try catch finally语句中含有return语句的执行情况
finally块中的内容会先于try中的return语句执行,如果finall语句块中也有return语句的话,那么直接从finally中返回了,这也是不建议在finally中return的原因.下面 ...
- Python + request接口测试中Cookie和Session的获取和使用
Cookie和Session的简单理解 由于Http协议是无状态的,所以产生了cookie和session进行状态的管理. 从哪里来,在哪里,到哪里去: --> Cookie是由服务端生成,存 ...
- 前端之CSS列表及背景类属性
一.列表类属性: 1.列表符号样式: list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式); 2. ...
- MySQL从服务配置文件
[mysql]port=3306socket=/var/lib/mysql/mysql.sockdefault-character-set = utf8mb4 [mysqld]server-id=2l ...
- sql server 2008怎么设置不允许windows身份验证