JQuery
purple_lumpy
先,找一个方向,然后,收拾收拾好,一步一步来
展开
-
jQuery 基础 通过关系查找 jQuery 对象
获取父元素- 使用jquery 对象的 parents() 方法,方法中还可以加入字符串进行过滤;parent() 方法返回的是直接父元素;parentsUntil()。 var lis = $('li'); var pa = lis.parents() var ul = lis.parents("ul")- 使用 jQuery 对象的closest() 方法,对当前元素原创 2018-01-30 15:35:32 · 232 阅读 · 0 评论 -
瀑布流网页模型的一个示例
结构: 一个大盒子,居中;包含若干个小盒子。每一个小盒子有一个阴影层HTML结构:<!DOCTYPE html><html><head> <title>瀑布流</title> <meta charset="utf-8"> <link rel="stylesheet" type=原创 2018-04-08 16:35:55 · 624 阅读 · 1 评论 -
jQuery 简单校验
输入框中内容校验- 获取输入框的内容var username = $('input[name='username']').val();然后,比较,查询操作就是了。原创 2018-04-08 13:21:12 · 144 阅读 · 0 评论 -
jQuery html() DOM操作记录
jQuery 的 html() 函数,简直了...举一个完整的小例子,要把一个div 复制到另一个div 里。使用代码:var htmlV = $('#layerContent').html();获得id 为layerContent的子元素的html代码。再使用代码: $('#endend').html(htmlV);在id 为endend 的div 中加入htmlV代码。...原创 2018-04-08 12:44:14 · 306 阅读 · 0 评论 -
jQuery 弹出层案例
弹出层,例如登录界面。有一个半透明的div,与另一个带有主题的div组成。<!DOCTYPE html><html><head> <title>弹出层</title> <meta charset="utf-8"> <style type="text/css">原创 2018-04-07 17:53:12 · 180 阅读 · 0 评论 -
jQuery 基础 jQuery插件
jQuery 插件机制jQuery 主要有两种使用方式:1. 在jQuery 集合对象上面调用方法2. 直接调用jQuery 方法针对这两种使用方法,jQuery 插件机制也很简单,就是扩展这两种使用方法:1. 扩展jQuery对象上的方法:jQuery.fn.extend()2. 扩展jQuery 工具方法:jQuery.extend()第二种方式- ....extend:解释第一种方式- .....原创 2018-03-20 13:48:12 · 137 阅读 · 0 评论 -
jQuery 基础 jQuery事件模型四
快捷方法 - blue - change - click - dblclick - focus - focusin - focusout - keydown - keypress - keyup - mousedown - mouseenter - mouseleave - mousemove - mouseout - mouseo原创 2018-03-19 23:16:21 · 124 阅读 · 0 评论 -
jQuery 基础 jQuery事件模型三
触发事件由代码主动触发事件 - trigger(eventType[,data]) - triggerHandler(eventType[,data])区别:triggerHandler 相比 trigger:1. 不会触发浏览器默认事件2. 不会产生事件冒泡3. 只触发jQuery 对象集合中第一个元素的事件处理函数4. 返回的是事件处理函数的返回值,原创 2018-03-19 15:39:47 · 145 阅读 · 0 评论 -
jQuery 基础 jQuery事件模型二
jQuery 事件实例对象的属性(jQuery做了兼容性处理) 事件实例对象的方法: - preventDefault() - stopPropagation() - stopImmediatePropagation() - isDefaultPrevented() - isPropagationStopped() - isImmediateP原创 2018-03-19 14:58:10 · 144 阅读 · 0 评论 -
jQuery基础 在DOM元素中存取数据
在DOM元素中存数据,可以使用DOM元素的属性(内置的)和特性(自定义的)。但直接这样做,可能会导致内存泄漏等安全问题。下面将介绍 一种 由jQuery提供的更安全的在DOM元素存取数据的方法。获取数据的值:data( [name] )设置数据的值:data(name, value) data(object) ---- 批量传入,传对象即可。返回该DOM所有的data:data()删除数据:re...原创 2018-03-05 16:52:40 · 944 阅读 · 0 评论 -
JQuery 基础 jQuery事件模型一
jQuery 事件模型- 提供了统一的事件处理方法(没有兼容性烦恼)- 允许添加多个事件处理函数(采用 DOM 2级事件处理方式)- 使用标准的事件名称(不带on)- 事件实例做为事件处理函数的第一个参数- 标准化事件实例最常用的属性- 提供了统一的事件取消和阻止行为的标准添加事件处理- on(eventType[,selector][,data],handler)eventType: 事件名称(...原创 2018-03-15 15:43:55 · 216 阅读 · 0 评论 -
JQuery 基础 DOM事件模型
浏览器的事件模型,有两种:1. DOM 0级事件:产生较早,所有浏览器基本上都支持这种事件模型2. DOM 2级事件:绝大部分现代浏览器都支持,IE8 和更早期版本浏览器 部分或不支持DOM 0级事件模型原创 2018-03-08 11:02:00 · 168 阅读 · 0 评论 -
jQuery 基础 jQuery对象的文档处理
一、移动或插入元素append(content[,content,...]) 在元素内容尾部添加内容示例: $(function(){ var elements = $('li'); elements.append('阅读更多...') }) prepend(content[,content,...]) 在元素内容头部添加内容示例: $(f原创 2018-03-07 17:36:03 · 338 阅读 · 0 评论 -
jQuery 基础 修改元素样式
修改元素样式一、修改元素的类 addClass(names) removeClass(names)给元素增加类: <script type="text/javascript"> $(function(){ var element = $('#demo'); element.addClass('red b10') }) </script> <sc...原创 2018-03-06 17:09:16 · 2865 阅读 · 0 评论 -
jQuery 基础 操作 jQuery 对象
操作 jQuery 对象- 检查数量- 父子邻居关系- 过滤元素的集合- 遍历用 jQuery 创建 html 元素dom 对象(元素)与 jQuery 对象:前者是浏览器的网页页面中渲染出来的元素,而后者是对一组 dom 元素的包装。检查 DOM 对象:if(obj.nodeType)检查 jQuery 对象: if(obj.jquery)转换:原创 2018-01-29 22:20:37 · 425 阅读 · 0 评论 -
jQuery 基础 选择器
首先,JavaScript 选择元素- document.getElementById() 【返回的是元素】- document.getElementsByName() 【返回的是NodeList】- document.getElementsByTagName() 【返回的是HTMLCollection】- document.getElementsByClassName原创 2018-01-28 18:44:21 · 121 阅读 · 0 评论 -
JQuery 基础 使用
JQuery 是javascript 的一个库它能方便地处理HTML(DOM节点增加 删除)、事件、动画等;它可以兼容许多浏览器,不用考虑原生JS 的兼容性问题。使用JQuery 两种方式- 下载 JQuery 文件(官网,js文件),在html文件中,通过 中的 src 属性添加- CDN 内容分发网络,也是在html文件中,通过 中的 src 属性添加原创 2018-01-28 15:35:29 · 137 阅读 · 0 评论 -
jQuery 基础 筛选和遍历 jQuery 对象
给一个 jQuery 对象 增加一个元素:- 用逗号- 用 add() 方法 console.log( $('div,li') ) console.log( $('div').add('li') )给一个 jQuery 对象 过滤(删除)元素:- not(selector)- filter(selector) 是not() 的互补方法原创 2018-01-31 11:03:03 · 416 阅读 · 0 评论 -
jQuery 基础 jQuery插件 写一个插件
jQuery 插件 命名规范:jQuery.xxx.lightbox-1.0.0.js小心$符号:立即执行函数:(function($){ ...})(jQuery);处理复杂的参数:不好的例子:function xxx(p1,p2,p3,p4,p5,p6){...}好的例子:(通过对象传递配置项的参数)xxx({p1:value1,p3:value3 })这样:function xxx(o...原创 2018-04-07 11:37:02 · 249 阅读 · 0 评论