jq实例

1.导航栏 <style type="text/css"> * {padding:0;margin:0;list-style:none;} img { width:110px;height:60px;} .head { width:100%; height:100%;} .headImg { width:970px; height:60px;margin:0 auto;} .nav { width:100%;height:40px; background:#000;} .n…

JQ面向对象

静态方法:某种类型才有的方法,这个方法干的事情只有类型本身有关,不受具体实例对象的影响,在C#语言中,它用static表示,VB中用share表示,而在jq中我们一般用$或者JQuery表示JQ类型,而静态方法扩展一般用$.extend. 实例方法:当类型被表示为具体事物时,它被称为对象,或者实例对象,它所拥有的行为(方法)我们称为实例方法(一般书上不这样叫,一般都叫方法,但我比较喜欢实例方法这个代言,呵呵),在C#中我们从类型变为对象,可以使用new关键字来建立它,在JQ中,我们使用$("名称…

JQ也要面向对象~在JQ中扩展静态方法和实例方法(jq扩展方法)

JQ也要面向对象,事实上,无论哪种开发语言,在开发功能时,都要把面向对象拿出来,用它的思想去干事,去理解事,面向对象会使问题简单化,清晰化,今天说两个概念“静态方法”与“实现方法”,这个在面向对象的语言中才有的东西,现在要把它搬到JQ中来了,呵呵. 静态方法:某种类型才有的方法,这个方法干的事情只有类型本身有关,不受具体实例对象的影响,在C#语言中,它用static表示,VB中用share表示,而在jq中我们一般用$或者JQuery表示JQ类型,而静态方法扩展一般用$.extend. 实例方法:…

从零开始，DIY一个jQuery（3）

在前两章,为了方便调试,我们写了一个非常简单的 jQuery.fn.init 方法: jQuery.fn.init = function (selector, context, root) { if (!selector) { return this; } else { var elem = document.querySelector(selector); if (elem) { this[0] = elem; this.length = 1; } return this; } }; 因此我们…

从零开始，DIY一个jQuery（1）

从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途,在整个系列的实践中,我们会把 jQuery 的主要功能模块都了解和实现一遍. 这会是一段很长的历程,但也会很有意思 —— 作为前端领域的经典之作,jQuery 里有着太多奇思妙想,如果能够深入理解它,对于我们稳固js基础.提升前端大法技能来说大有裨益. 另外,本系列的相关代码均可以从我的github 上获取到. 1. 免 new 实现我们在使用很多插件的时候,都需要使用 new XXX() 的写法来实例化一个引用: var li…

jquery中链式调用原理

(1).链式调用 $("#mybtn").css("width","100px") .css("height","100px") .css("background","red"); (2).在对属性进行操作时建议使用JSON形式控制样式 $("#mybtn").css({ width:200, height:"200"…

jQuery原生框架-----------------dom操作

// 扩展DOM操作方法jQuery.fn.extend({ // 设置或者获取元素的内容 html: function( html ) { /* * 实现思路: * 1.不传参,返回第一个元素的内容 * 2.传参 * 2.1.参数类型为null,遍历所有元素,依次清除它们的内容 * 2.2.参数类型为字符串,遍历所有元素,依次重置它们的内容 * 3.链式编程返回this * */ // 不传参,返回第一个元素的内容 if( arguments.length === 0 ) { return t…

jQ1.5源码注释以及解读RE

jQ作为javascript的库( ▼-▼ ), 尽善尽美, 代码优美, 值得学习. 这一周平常上班没啥事也看jQ1.5的代码, 今天周六差不多看完了(Sizzle部分还没看), 重新看了一下, 又有很多新东西; 相对与1.4版本的ajax部分, 整个进行了重写, 实在是坑爹, 现在还有很多没弄懂, ajax可以非常简单地: var xhr = new XMLHttpReques || new window.ActiveXObject("Microsoft.XMLHTTP");…

模拟jquery实现each方法和map方法

********************each方法********************** function each( obj, cbk ) { /* * 实现思路: * 1.首先却分传入进来的是不是likeArray, * 2.如果是采用 var i = 0 的遍历方法遍历所有的值, * 然后把遍历到的下标和值依次传给回调使用,并且设置回调内部的this为遍历到的值 * 3.如果不是likeArray,才有for in的遍历方法遍历所有的值, * 然后把遍历到的键和值依次传给回调使用,…

数组的foreach方法和jQuery中的each方法

/* * 数组的forEach方法: * 1.返回给回调的参数先是值,然后是下标 * 2.回调函数执行时内部的this指向window * */ /*var arr = [1,2,3,4,5]; arr.forEach(function( val, index ) { console.log( val, index, this ); });*/ /* * jQ实例的each方法, * 1.返回给回调的参数先是下标,然后是值 * 2.回调函数执行时内部的this就指向遍历到的每一个值(就是回调中接…

jQuery.fn

DIY一个jQuery 写了一个非常简单的 jQuery.fn.init 方法: jQuery.fn.init = function (selector, context, root) { if (!selector) { return this; } else { var elem = document.querySelector(selector); if (elem) { this[0] = elem; this.length = 1; } return this; } }; 因此我们在…

jQuery系列第八章 jQuery框架Ajax模块

第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的. jQuery框架对Ajax操作进行了封装,在jQuery框架的Ajax模块中提供了很多方法用于网络编程.我们主要从Ajax网络请求.Ajax事件以及序列化等方面讲解. 8.2 jQuery框架中的Ajax网络请求 jQuery框架中为我…

jQuery系列第七章 jQuery框架DOM操作

第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点使用JavaScript原生方式创建DOM节点并添加到页面中的代码示例: //01 创建DOM节点 var oDiv = document.createElement("div"); //02 设置DOM节点的内容 oDiv.innerText = "测试的DIV标签";…

jQuery系列第六章 jQuery框架事件处理

第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框架增加并扩展了基本的事件处理机制,jQuery框架提供了更加优雅的事件处理语法,并极大的增强了事件处理能力. 6.1 事件处理简单说明 jQuery框架在JavaScript的基础上进一步封装了不同类型的事件模型,形成了一套更强大和优雅的“jQuery事件模型”. jQuery中的事件模型表现出以下…

tips 移入悬浮功能

前景: 页面部分区域需要移入悬浮效果,当然默认的 title 也是可以的,最多只是格格不入,但是却是最为靠谱的.. 思路: 基于 jq 实例扩展 .使用立即执行函数保持功能独立. 自定义类实现功能封装的定位解释小功能实现: 1.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>tip</title> <link rel=&q…

关于jquery几个自己不咋用到的常用遍历赛选的api

1.contains:作用是返回包含某个文字的元素节点例子:要给所以含有“lyz”的p节点加样式: 可以这样:$("p:contains(lyz)").css("color","red"):这里的字符串无需加“”,这个选择器也没有对应遍历方法 2.filter,is,find has:返回遍历选择元素节点: 区别:find是向下查找出所有符合查找对象的节点,filter是纯匹配就是从当前jq实例里面匹配出符合要求的节点,is是返回布尔值:has…

DOM元素属性值如果设置为对象

结论:内部会调用toString方法,将设置的对象转换为字符串添加给相应的属性: 这个问题呢,是通过jQuery的each方法中,回调函数的this指向问题而来: 我们知道,回调函数中的this如果指向的是基本数据类型,那么系统会自动将这个基本数据类型的值包装为对应的对象类型: 就比如: 数组里面存的是string类型的值,然后jq实例调用each方法,打印的this如下图所示: this指向的基本数据类型的值被转换为了String类型: 但是这里说的不是这个问题,而是和这个问题类似,我们在给D…

jQuery的原理

JQ的原理 jquery-1.xxx :专门为PC端诞生的类库,兼容所有的浏览器 jquery-2.xxx:当初是为了移动端而准备的,所以IE低版本浏览器一般不兼容,但是这个版本针对移动端的事件等操作也不是特别的完善,被Zepto这个类库取代了 jquery-3.xxx:自己回去扩展一下,看看新增加或者修改了哪些方法 1.jQuery充分利用了JS中函数的三种特性:普通函数.类.普通对象:jQuery就是这个类: JQ原理: JQ本身就是一个类,在外面使用的$和jQuery是同一个东西,JQ中提…

jQuery扩展$.fn、$.extend jQery命名方法扩展练习总结

jquery源码部分分析

1.整体架构和如何辨别浏览器端和node端自执行函数,判断在什么端,如果在浏览器端就执行factory函数 //(function(){a,b})(a,b) //jq大架构,闭包,自执行函数,传入函数参数(factory:工厂模式) (function(global,factory){ "use strict" //严格模式 if(typeof module ==="object" && typeof module.exports ==="…

最近学习工作流推荐一个activiti 的教程文档

全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介协议下载源码必要的软件 JDK 6+ Eclipse Indigo 和 Juno 报告问题试验性功能内部实现类 2. 开始学习一分钟入门安装Activiti 安装Activiti数据库引入Activiti jar和依赖下一步 3. 配置创建ProcessEngine ProcessEngineConfigur…

基于jq插件开发及弹窗实例

基于jq的插件开发是什么鬼,$.fn是什么鬼,我在实际工作中也遇到过这个问题,下面就让我们一起来看一看这些都是什么鬼. 首先我们介绍$.fn. $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQu…

js 与 jq 的节点添加删除实例

JavaScript实例:XML DOM节点的添加 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>JavaScript实例</title> <style> #did{width:400px;height:300px;border:1px solid #ddd;} img{border:2px solid #fff;} img:h…

用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例之登陆和操作权限

先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自己做的,主要还是因为前端差,还有就是懒.请大家不要太过在意命名和前端样式,我并没有进入公司工作,命名没有具体规范,都是随心所欲.前端实在太差,如果你觉得颜色样式太差,只能说明我的审美有问题,咱们主要看功能实现. 上篇文章发布后有一定的推荐量和浏量,对一个初学者来说,自认为还是挺不错的.最主要的是收到…

jq 文字上下不间断滚动实例

<div class="ruzhuright"> <div class="rzcontent"> <div class="gundongright"> <div class="gdlist"> …

jq给页面添加覆盖层遮罩的实例

先引入jq代码,然后代码如下: $(function(){ var docHeight = $(document).height(); //获取窗口高度 $('body').append('<div id="overlay"></div>'); $('#overlay') .height(docHeight) .css({ , //透明度 'position': 'absolute', , , 'background-color': 'black', 'widt…

jq访问网络接口实例

最近需要在app生活频道上,需要添加一些类目,这就需要用到一些公用的开放接口,ajax其实调用并不复杂,但是结合jquery则显得更简洁一些,下面一起来看看jquery调用后台api. 代码如下: <script> $(document).ready(function() { $("#queryTrade").click(function() { $("tbody").html("") var tradeId = $("#t…

登陆jq表单验证及jqcookie记住密码实例

<p><%@ page contentType="text/html; charset=utf-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %></p> <p>尽知网</p> <!-- HTML5 shim and Respond.js for IE8 support of HTML…

js与jq对数组的操作

一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度 var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); 创建一个数组并赋值要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然…

js,jq,css选择器

js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 css选择器: 基础选择器 * 通用元素选择器,匹配页面任…

【jq实例】的更多相关文章