第208天:jQuery框架封装(一)
一、事件框架
1、DOM2 --事件流
事件流 :冒泡 捕获
1.1冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象或者body)的顺序触发。
1.1.1浏览器兼容问题处理
如何去判断一个浏览器是否支持某个功能
其实就是判断对象是否拥有某个方法或者属性
if(dom.addEventListener ){
dom.addEventListener(type, fn, false);
}else if(dom.attachEvent){
//如果支持 --IE
//
dom.attachEvent('on' + type, fn);
}
1.1.2 DOM2- addEventListener 优点
传统:元素只能绑定一个事件
DOM2:可以绑定多个
动态的添加和移除事件
1.1.3阻止冒泡
W3C:e.stopPropagation
IE:event.cancelBubble = true;
1.1.4阻止默认行为
W3c:e.preventDefault();
IE:event.returnValue = false;
1.2事件委托
1.3使用三种方式封装框架
使用三种方式封装框架:
1 原型方式
我们必须要先实例化才能使用
Var $$ =function(){}
$$.prototype={}
$$= new $$ ()
2 json方式 -- 对象的字面量形式
我们不用实例化,对象的字面量就是原型对象的一个实例。
所以使用json的时候不需要实例化了。
Var $$= {on:function(){}}
$$.on()
3 extend 模块化
二、选择框架
基本选择器
标签选择器、class选择器、ID选择器、通配符选择器、群组选择器
1、层次选择器
2、属性选择器
3、表单选择器
4、层次+多组
foo = foo||bar ,这行代码是什么意思?为什么要这样写?
答案:if(!foo) foo = bar; //如果foo存在,值不变,否则把bar的值赋给foo。
短路表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。
二、CSS样式
1、如何获取和设置样式
1.1访问css的两种方式
常用方式:点语法
doms[0].style.color ='yellow'
键值对方式
doms[0].style['color']='yellow'
我们封装框架只能使用第二种
1.2设置css
//设置css
function setStyle(doms,key,value){
for(var i=0;i<doms.length;i++){
doms[i].style[key]=value
}
}
封装css框架
2.1原生获取
//获取样式值
console.log(doms[0].style.color)//color是通过style方式添加上去的,可以通过style.color获取
console.log(doms[0].style.background)//background是通过class方式添加上去的,获取不到
原生获取存在问题:
1通过class设置的样式也是无法获取
2 动态添加的样式也无法获取
解决:
使用getComputedStyle函数
用法 - 第一种用法:
console.log(window.getComputedStyle(dom[0],null).color)
第二种方式:
console.log(window.getComputedStyle(dom[0],null)[‘color’])
getComputedStyle语法:
语法如下:
var style = window.getComputedStyle("元素", "伪类");
例如:
var dom = document.getElementById("test"),
style = window.getComputedStyle(dom , ":after"); /*如果不是伪类 直接null*/
/*getComputedStyle与style的区别
我们使用element.style也可以获取元素的CSS样式声明对象,但是其与getComputedStyle方法还有有一些差异的。
只读与可写
正如上面提到的getComputedStyle方法是只读的,只能获取样式,不能设置;而element.style能读能写,能屈能伸。
获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>,getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。
IE不支持getComputedStyle的解决办法
dom.currentStyle[key]
2.2封装
function css(context, key, value){
/*如果传递过来的是dom 如果传递过来的是id*/
var dom = $$.isString(context)?$$.$all(context) : context;
// 如果是数组
if(dom.length){
//先骨架骨架 -- 如果是获取模式 -- 如果是设置模式
// 如果value不为空,则表示设置
if(value){
for(var i = dom.length - 1; i >= 0; i--){
setStyle(dom[i],key, value);
}
// 如果value为空,则表示获取
}else{
return getStyle(dom[0]);
}
// 如果不是数组
}else{
if(value){
setStyle(dom,key, value);
}else{
return getStyle(dom);
}
}
function getStyle(dom){
if(dom.currentStyle){
return dom.currentStyle[key];
}else{
return getComputedStyle(dom,null)[key];
}
}
function setStyle(dom,key,value){
dom.style[key] = value;
}
}
三、属性框架
三个主要的:att、raddClass、removeClass
1、封装attr
function attr(context,key,value){
var doms = $$.$all(context)
//设置模式
if(value){
for(var i =0;i<doms.length;i++){
doms[i].setAttribute(key,value)
}
}else{
//获取模式
return doms[0].getAttribute(key)
}
}
2、封装 addClass
function addClass(context,name){
var doms = $$.$all(context)
for(var i=0;i<doms.length;i++){
addOneName(doms[i])
}
/*给一个元素添加class*/
function addOneName(dom){
dom.className = dom.className + " " + name
}
}
3、封装removeClass
function removeClass(context, name){
var doms = $$.$all(context);
for(var i= 0,len=doms.length;i<len;i++){
removeName(doms[i],name);
}
function removeName(dom,name){
/!*'add buy hide' --- 'add buy'*!/
dom.className = dom.className.replace(name,'')
/!* dom.className = dom.className + ' ' + name;*!/
}
4、封装hasClass
function hasClass(context,name){
var doms = $$.$all(context)
var flag = true;
for(var i= 0,len=doms.length;i<len;i++){
flag = flag && check(doms[i],name)
} return flag;
//判定单个元素
function check(element,name){
return -1<(" "+element.className+" ").indexOf(" "+name+" ")
}
}
5、封装getClass
//获取
function getClass(id){
var doms = $$.$all(id)
return $$.trim(doms[0].className).split(" ")
}
四、内容框架
1、封装Html
function html(context,value){
var doms = $$.$all(context)
//设置模式
if(value){
for(var i = 0;i<doms.length;i++){
doms[i].innerHTML = value
}
}else{
/*获取模式*/
return doms[0].innerHTML
}
}
2、封装Text
function text(dom,text){
dom.textContent = text
}
3、封装val
Jquery
//基本用法 设置
$("p").val("Hello world!");
//基本用法 获取
console.log($("#test").val()); //单选框
console.log($("#fruit").val());
$( "#fruit" ).val( "芒果" ); //多选框
console.log($("#vage").val())
$( "#vage" ).val([ "土豆", "西葫芦" ]); //checkbox
$( "input[name='checkboxname']").val([ "三国演义", "水浒传", "红楼梦" ]);
第208天:jQuery框架封装(一)的更多相关文章
- js框架封装,模拟jQuery封装
模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获 ...
- jQuery框架-3.jQuery自定义封装插件和第三方插件
一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend Merge th ...
- 【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享(多文件版本)
这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下: 由于代码量和目录比较多,这个封装好的 ...
- 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
- 第209天:jQuery运动框架封装(二)
运动框架 一.函数------单物体运动框架封装 1.基于时间的运动原理 动画时间进程 动画距离进程 图解: 物体从0移动到400 当物体移动到200的时候 走了50% 同样的,物体总共运行需要4秒 ...
- Magicodes.WeiChat——后台JS框架封装
Magicodes.WeiChat同时也致力于提高后台开发效率,因此对在后台前端这块也做了一定的封装.我们先来说说主要的框架JS——mwc.js和mwc_elements.js.这两个JS文件位于Sc ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- 浅析jQuery框架与构造对象
这是一些分析jQuery框架的文字 面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉javascript面向对象方面的知识 4.熟练使用jQue ...
- jquery简单封装
对Raphael画图标的一个jquery简单封装 公司要做一个项目的demo,要求地图上可以插红旗,所以就用到了Raphael. 因为是个demo,所以地图就用了一张图片,效果如下: 所以为了更好的封 ...
随机推荐
- 《信息安全技术》实验2——Windows口令破解
实验2 Windows口令破解 在网络界,攻击事件发生的频率越来越高,其中相当多的都是由于网站密码泄露的缘故,或是人为因素导致,或是口令遭到破解,所以从某种角度而言,密码的安全问题不仅仅是技术上的问题 ...
- # 20155224 实验三 敏捷开发与XP实践 实验报告
20155224 实验三 敏捷开发与XP实践 实验报告 实验内容 XP基础 XP核心实践 相关工具 实验要求 没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim ...
- windows查看系统版本号
win+R,输入cmd,确定,打开命令窗口,输入msinfo32,注意要在英文状态下输入,回车.然后在弹出的窗口中就可以看到系统的具体版本号了. win+R,输入cmd,确定,打开命令窗口,输入v ...
- dat类型文件入库后校验数据有问题
一.问题: dat或者txt文件入库后,字段进行正则校验报出不应该出现的错误 二.排查: (1)根据报出的错误,把错误日志中的字串单独提取出来,进行正则校验发现没有问题 (2)可以想到,要不是程序问题 ...
- [agc011F]Train Service Planning-[线段树优化dp+神秘思考题]
Description 传送门 Solution 请围观lhx大佬的博客(大佬写的太好了我都没有写的动力了em) Code #include<iostream> #include<c ...
- 4825: [Hnoi2017]单旋
4825: [Hnoi2017]单旋 链接 分析: 以后采取更保险的方式写代码!!!81行本来以为不特判也可以,然后就总是比答案大1,甚至出现负数,调啊调啊调啊调~~~ 只会旋转最大值和最小值,以最小 ...
- Matplotlib API汉化
Pyplot API 示例汇总:https://matplotlib.org/gallery/index.html#api-examples 该matplotlib.pyplot模块包含的功能允许您快 ...
- C#课后小作业
有关C#基础的练手 跟大家一起分享下 1.让用户输入一个100以内的数 打印1-100之间所有的数,用户输入的数除外 2.让用户输入一个100以内的数 打印1-这个数之间所有的数的和 3.使用一个fo ...
- Python不生成HTMLTestRunner报告-转载学习
1.问题:Python中同一个.py文件中同时用unittest框架和HtmlReport框架后,HtmlReport不被执行. 2.为什么?其实不是HtmlReport不被执行,也不是HtmlRep ...
- CentOS7.2最小化安装后系统优化
系统初始化技术的演变 1.sysvinit技术 (1)Linux系统的第一个进程(pid=1)为init: Linux 操作系统的启动首先从 BIOS 开始,接下来进入 boot loader,由 b ...