- 简要概述JQuery 11-25
- 可想自己造一个jQuery库? 11-25
- jquery动态添加和删除html标签做法 11-25
- jQuery插件添加回调方法 11-25
- jQuery实现的搜索列表过滤 11-25
- jQuery 遍历 - 同胞(siblings) 11-25
- jQuery 遍历 11-25
- jquery判断checkbox是否被选中 11-25
- JQuery时间格式化插件SmartTime.js 11-25
- jquery笔记 11-25
简要概述JQuery
发布者: superzhang | 发布时间:2017-11-25一、概述
jQuery 是一个 JavaScript 函数库,可以通过一行简单的标记被添加到网页中。
二、安装
1、获取库
www.jquery.com
production(生产环境版本)- 线上(压缩)
development(开发环境版本)- 开发和学习(未被压缩)
2、引入JQuery库
<script src="jquery库地址"></script>
三、JQuery的应用
1、$(document).ready();
或
$();
2、$(selector).action();
selector:选择器
action :完成的功能。
3、选择器
css(属性名称,属性值)
a、通配选择器
*
b、元素选择器
HTML tag 名称
c、id选择器
#id属性值
d、class选择器
.class属性值
e、群组选择器
各选择器之间用逗号间隔
f、后代选
可想自己造一个jQuery库?
发布者: superzhang | 发布时间:2017-11-251.虽然说市面上有许多讲解jQuery源码或者是也有类似如何搭建一个属于自己的javascript库的文章。
2.但毕竟更多数人的水平并没有达到单纯看源码解析就能读懂jQuery
3.如果你既不能通过书籍视频和他人文章的源码解析明白jQuery,也想自己实现一个jQuery的。
4.本系列就是以一些不同的方法手段,简单的代码,实现了一套与jQuery一样的API
5.最后在每篇文章的最后会留下github源码地址,希望能得到大家star的认可与支持,谢谢。
新增width,height,extend
事件部分讲完了后,我们最后实现3个方法.:
关于width(),height()就常用的就2种,一个是取值,一个是赋值.
我们通过判断arguments的个数,是取值还是赋值.
赋值很容易,我们就用最简单的办法,直接设置.
如果是取值,那我们就要做个判断,因为window,和document的取法是不一
jquery动态添加和删除html标签做法
发布者: superzhang | 发布时间:2017-11-25在前台功能开发的时候需要实现动态添加和删除html标签的做法,特意整理了自己的实现过程供大家参考。
1 html代码示例
<div>
<p class="title">
*已预约资料回报
</p>
<div>
系统每日排程寄送报表,回报当前管理状况。
</div>
<ul>
<li>
<input name="reserDataName" onblur="checkEmail(this)" type="text" size="30" value="">
<a onclick="addLi(this)"><i id="addli" class="fa fa-plus" aria-hidden="true"></i></a>
<a onclick="removeLi(this)"><i id="delli" class="fa fa-minus" aria-hidden="true"></i></a>
jQuery插件添加回调方法
发布者: superzhang | 发布时间:2017-11-25在jQuery插件开发中,我们需要在执行某个动作的情况后促发一些回调函数,如hover, click, change等,或者当插件初始化完成后执行一个简单的回调函数。
$.fn.myPlugin = function( setting ) { var defaults = { color: 'red', size : '12px', initFn : null //当插件初始化完成后执行的回调函数, 默认为null } //默认值继承 var config = $.extend( defaults, setting || {}); // 引用回调函数 if (typeof config.initFn == 'function') { // 确保类型为函数类型config.initFn.call(this); // 执行回调函数 }};在页面中调用
$('#icon').myPlugin({color : 'yellow',initFn : function () {alert('init successfully');}})jQuery实现的搜索列表过滤
发布者: superzhang | 发布时间:2017-11-25jQuery实现的搜索列表过滤,在搜索输入框输入文字的时候可以根据你输入的内容进行判断然后过滤,展示与你搜索相关的内容在搜索框下面,方便用户能够快速定位要查找的内容,效果如下:
实现代码
html
css
javascript
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 <h2> 的所有同胞元素:
实例
$(document).ready(function(){ $("h2").siblings();});
jQuery 遍历
发布者: superzhang | 发布时间:2017-11-25什么是遍历?
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
图示解析:
<div> 元素是 <ul> 的父元素,同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素,同时是 <div> 的子元素
左边的 <li> 元素是
jquery判断checkbox是否被选中
发布者: superzhang | 发布时间:2017-11-25广东IT优就业
jquery如何判断checkbox是否被选中?
直接看下图代码:
更多IT精彩推荐:
必看!给你一个变身土豪的机会://www.ujiuye.com/zt/qgjx/?wt.mc_id=17009338
双十一IT界省钱攻略:http://www.ujiuye.com/zt/ssy/?wt.mc_id=17009338
JQuery时间格式化插件SmartTime.js
发布者: superzhang | 发布时间:2017-11-25我们在界面的时候常常需要后台取回来的时间戳的进行转换显示,普通转换只是1471843128转换为2016/8/22 13:18:48 然后再去显示!当然这样没有什么不可的,但是我们要做到这样的显示该如何实现呢?
刚刚,1分钟前,2分钟前,3分钟前这样呢?当然实现起来很简单,就是拿当前时间跟你获取到的时间戳进行对比,不断的if else else if,那么我们具体怎么实现呢?这里看下作者蜜汁叉烧的实现:
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();
