dom对象

Vue介绍

折月煮酒 提交于 2020-02-01 21:45:06
MVVM架构模式 MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理。 MVVM模式图 Vue介绍 Vue框架实际上就是一个MVVM的渐进式JavaScript框架,是初创项目的首选前端框架。它是轻量级的,有很多独立的功能或库,在vue里我们可以根据自己的项目来选用它的一些功能。Vue 的核心库只关注视图层,所以开发者关注的只是m-v的映射关系。vue是基于MVVM分层架构思想的前端框架。 Vue开发的两个概念 :“渐进式框架”和

Web_jQuery

陌路散爱 提交于 2020-02-01 21:26:01
第1章: jQuery简介 为了 简化 JavaScript 的开发 ,一些 JavsScript 库诞生了。 JavaScript库封装了很多预定义的对象和实用函数,简化HTML与JavaScript之间的操作,能帮助使用者建立有高难度交互的页面, 并且 兼容各大浏览器 。 当前流行的 JavaScript 库有 jQuery是继prototype之后又一个优秀的JavaScript框架。如今, jQuery已经成为最流行的JavaScript库。 在世界前10000个访问最多的网站中,有超过55%在使用jQuery。 jQuery,顾名思义,也就是JavaScript和查询(query),其宗旨是“WRITELESS,DO MORE”,极大地简化了JavaScript开发人员遍历HTML文档,操作Dom,处理时间,执行动画和开发Ajax,具体来说,优势如下 jQuery是免费、开源的 轻量级(压缩后只有几十k) 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax使用 出色的多浏览器兼容性 隐式迭代:对集合对象做相同操作时不需要逐个进行遍历,jQuery自动进行遍历 文档说明很全 可扩展插件 第2章:jQuery快速入门 jQuery库实际上就是一个js文件,只需要在网页中直接引入这个文件就可以了。 将jQuery的库文件加入 在开发测试时,

响应式数据($set、$nextTick)

烈酒焚心 提交于 2020-02-01 14:38:21
响应式数据的说明 响应式数据: 把data中的数据挂到vm身上,vm身上的这个数据其实就是响应式的 一旦数据发生了改变,页面中的内容也会跟着改变 动态添加的数据是无效的以及$set的使用 data中的数据一定要先声明,再使用,动态给对象添加的属性不是响应式的 < div id = "app" > < p > { { person . name } } -- - { { person . age } } -- - { { person . gender } } < / p > < / div > < script src = "vue.js" > < / script > < script > var vm = new Vue ( { el : '#app' , data : { person : { name : 'zs' , age : 18 } } } ) < / script > // 动态给data中添加的数据是无效的 // 在vue实例创建的时候,会把data中的数据绑定到vm上,所以data中的数据是响应的 // 但是动态绑定的数据不是响应是的。 vm . person . gender = '男' 如果想要动态绑定数据,并且是响应式的,需要使用 vm.$set方法 this . $ set ( this . person , 'gender' , '男' ) 结论:

jquery学习(3)--高级选择器

我与影子孤独终老i 提交于 2020-02-01 08:02:56
自己手写的学习笔记。常规选择器: /****************学习--高级选择器(1)****************/ ---高级选择器:ie7+ 层次选择器: 后代选择器 ul li a $('ul li a') 获取追溯到的多个dom对象 ie6+= 子选择器 div>p $('div p') 只获取子类节点的多个dom对象 ie7+ next选择器 div+p{} $('div+p') 只获取某节点后的同一个同级对象 ie7+ nextAll选择器 div~p{} $('div~p') 获取某节点后面的所有同级的dom对象 ie7+ 在层次选择其中,除了后代选择器外。其他的三种高级选择器不支持ie6的,jquery却是兼容ie6的、 //1.后代选择器--》全兼容 $('#box p').css('color','#666'); //jquery为后代选择器提供了一个等价的find()方法 $('#box').find('p').css('color','#666'); //2.子选择器,孙子级失效。只支持一层子级(儿子级)。 #box>p{ color:red;}//css代码,不支持ie6 $('#box>p').css('color','orange');//jquery兼容ie6 //jquery为子选择器提供了一个等价children()方法。 $('

jQuery常规选择器

懵懂的女人 提交于 2020-02-01 03:52:31
jQuery最核心的组成部分就是:选择器引擎。它继承了CSS的语法,可以对DOM元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery选择器实现了CSS1~CSS3的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。 一.简单选择器(ID选择器) 在使用jQuery选择器时,我们首先必须使用“$()”函数来包装我们的CSS 规则。而CSS规则作为参数传递到jQuery对象内部后,再返回包含页面中对应元素的jQuery对象。随后,我们就可以对这个获取到的DOM节点进行行为操作了。 #box { //使用ID选择器的CSS规则 color:red; //添加一个样式color:red } 在jQuery选择器里,我们使用如下的方式获取同样的结果: $(function () { $('#box').css('color','blue'); //添加一个行为css('color','blue'),这个行为是添加样式 }); 那么除了ID选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class): (1)元素名选择器获取所有div元素的DOM对象,CSS模式:div {} ,jQuery模式:$('div') <body> <div>常规选择器</div> <div>常规选择器</div> <div>常规选择器</div> <

JavaScript学习笔记——第二天

匆匆过客 提交于 2020-01-31 21:53:01
JavaScript学习打卡 JavaScript学习笔记---第二天 JavaScript笔记 第二天 一.DOM编程【重点】 1. 概念 ---- document object model 文档对象模型 2. DOM提供的API --- 获取标签的api 3. Dom里的常见属性 4. 处理下拉列表的常见属性 5. 从网页中删除标签 6. 向网页中添加标签 二.BOM 1. 概念 --- browser object model 浏览器对象模型 2. 与window对象相关的函数和属性 三.重构代码 1. 网页中的事件处理 2. 可以将js代码从网页中剥离出来,单独定义在一个以.js为结尾的文件中,在网页里通过标签引入 JavaScript学习笔记—第二天 JavaScript笔记 第二天 一.DOM编程【重点】 1. 概念 ---- document object model 文档对象模型 1) html是标记语言文档,解析技术一般有两种 DOM SAX DOM:浏览器会将整个文档加载进内存,将文档封装成一棵“文档树”,文档里的 所有标签都被封装成“标签对象”,成为这棵树上的一个节点(Element–标 签 , node – 文本) DOM里的两个重要对象: document对象 — 代表整个文档(特指body部分,浏览器里地址栏以下,状态 栏以上的部分) window对象

常规选择器——高级选择器

╄→гoц情女王★ 提交于 2020-01-31 09:31:12
高级选择器 在前面我们学习六种最常规的选择器, 一般来说通过这六种选择器基本上可以解决所有DOM节点对象选择的问题。但在很多特殊的元素上,比如父子关系的元素,兄弟关系的元 素,特殊属性的元素等等。在早期CSS的使用上,由于IE6等低版本浏览器不支持,所以这些高级选择器的使用也不具备普遍性,但随着jQuery兼容,这些选择器的使用频率也越来越高。 层次选择器 选择器 CSS模式 jQuery模式 描述 后代选择器 ul li a {} $("ul li a") 获取追溯到的多个DOM对象 子选择器 div > p {} $("div > p") 只获取子类节点的多个DOM对象 next选择器 div + p {} $("div + p") 只获取某节点后一个同级DOM对象 nextAll选择器 div ~ p {} $("div ~ p") 获取某节点后面所有同级DOM对象 在层次选择器中,除了后代选择器之外, 其他三种高级选择器是不支持IE6的, 而jQuery却是兼容IE6的。 如,html代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>常规选择器</title> <script type="text/javascript" src="jquery-1.12.3.js"></script>

DVWA-XSS(DOM)

我与影子孤独终老i 提交于 2020-01-30 08:28:41
XSS 简介 参考链接 XSS(Cross Site Script),全称跨站脚本攻击,为了与 CSS(Cascading Style Sheet) 有所区别,所以在安全领域称为 XSS。 XSS 攻击,通常指黑客通过 HTML 注入 篡改网页,插入恶意脚本,从而在用户浏览网页时,控制用户浏览器的一种攻击行为。 DOM—based XSS漏洞的产生 DOM—based XSS漏洞是基于文档对象模型Document Objeet Model,DOM)的一种漏洞。DOM是一个与平台、编程语言无关的接口,它允许程序或脚本动态地访问和更新文档内容、结构和样式,处理后的结果能够成为显示页面的一部分。DOM中有很多对象,其中一些是用户可以操纵的,如uRI,location,refelTer等。客户端的脚本程序可以通过DOM动态地检查和修改页面内容,它不依赖于提交数据到服务器端,而从客户端获得DOM中的数据在本地执行,如果DOM中的数据没有经过严格确认,就会产生DOM—based XSS漏洞。 DOM是什么? 可能触发DOM型XSS的属性: document.referer属性 window.name属性 location属性 innerHTML属性 documen.write属性 Low 1. 查看服务器端源代码如下: 没有采取任何保护措施 <?php # No protections,

JQuery 学习笔记

我们两清 提交于 2020-01-30 02:28:20
1 简介 JQuery,是辅助JS开发的库。是一套跨浏览器的JS库,简化HTML与JavaScript之间的操作。极大地简化了遍历HTML文档,操作DOM,处理事件、执行动画和开发Ajax。链式操作,隐式迭代。 2 HelloWorld 1 使用JQuery必须先引入JQuery的库文件,使用script标签引入。 <script type="text/javascript" src="../script/jquery-1.7.2js"></script> <script type="text/javascript"> //编写js代码 //$():调用$方法 $():较直jquery的核心函数 /*为$()方法传入一个function{}作为参数 : window.οnlοad=function(){写代码} 就相当于$(function{写代码});*/ $(function()){ //使用$()查找元素,使用.click()来绑定点击响应函数,把单机响应函数作为click()的参数传入即可 $("#btnId").click(function(){ alert("HelloWorld"); }); }); </script> 2 $的本质:$是一个函数 ,把$();称为JQuery的核心函数。 $==jQuery,故jQuery("#btn").click(function

【Vue】Vue相关面试题

旧巷老猫 提交于 2020-01-29 16:13:18
1.MVVM的理解 MVVM:Model-View-ViewModel,模型-视图-视图模型。Model指后端传递的数据,View指所看到的页面,ViewModel是连接view和model的桥梁。ViewModel功能: 1.将模型转换为视图,即将后端传递的数据转化为所看到的页面。实现的方式是数据绑定。 2.将视图转换为模型,实现的方式是dom事件监听。 两个方向都实现我们称之为数据的双向绑定。 在MVVM的框架下视图和模型不直接通信,通过ViewModel来通信。ViewModel通常实现一个observer观察者,当数据变化后,其能监听到数据的变化并且通知对应的视图进行自动更新,而当用户操作视图时,ViewModel也能监听到这种变化并且通知数据做改动。 前端并没有传统意义上的MVC模式,过去为了解决浏览器兼容问题出现的类库如jQuery并没有实现对业务逻辑的分层,所以维护性和扩张性较差,而以前的文件缺乏正规的组织形式,因此出现MVVM。在vue中model指的是js数据,view指的是页面视图,viewmodel指vue实例化对象。 2.vue优点 轻量级框架,国人开发简单易学,双向数据绑定,组件化,虚拟dom操作 3.父子组件传参 父向子props,子向父$emit,vuex,ref 4.v-show和v-if 都控制元素的显示和隐藏 v