jq封装

怎么用jq封装插件

怎么用jq封装插件以隔行变色为例实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再移除 class就行: 2.不用class,直接改变background属性: 直接开干,这里用第二种方法. 第一步: 模板 jq有一个基本框架,直接搬过来呗 (function($){ $.fn.yourName = function(options){ //各种属性.参数 } var optio…

jq封装选项卡写法

jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden");//隐藏内容类名 tabon.each(function(i){ $(this).hover(function(){ tabon.removeClass("cur"); $(this).addClass("cur");//当前加类名 tabCon.eq(i).sh…

省市联动JQ封装比较简洁调用的方法

前言因为省市联动的需求在每个项目几乎存在,所以本人也对此在web页面通过封装比较简洁的JQ方法循环判断调用调用后台获取数据再绑定到Select表单上.如果对代码有什么疑问或者更好办法可以在评论区留言. HTML代码 <select id="Province" name="Province"> <option selected="selected">--请选择--</option> </select>…

JQ封装图片预加载插件

我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 2)区别:两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 服…

js jq封装ajax方法

json文本格式 { "userInfo":[ {name:"admin",password:"123"}, {name:"admin1",password:"123"} ] } js: window.onload=function(){ var txtName=..; var txtPwd=..; var url="Login.aspx?name="+txtName.value+&qu…

JQ封装切换滚动功能

/*---------控制滚动图片v1(作者:SFLYQ)-----------Options 配置对象,(用来配置控制元素的dom位置,初始化一些必要的对象或者方法)DoIni 初始化操作(初始化元素的jq对象,以及事件绑定等)DoMove 控制图片现在模块的移动(控制的方向又用户传入)BindMoveItem根据dom位置,绑定这个元素为初始化选中,并显示在第一个,*/效果地址:http://pro9505d48a.isitestar.cn/ 代码下载地址:https://github.co…

jq封装插件

$.extend()拓展方法: $(function(){ $.extend({ money:function(){ alert("我要努力赚钱") }, money:function(){ alert("我要努力赚钱") }, }) }) $.money()----->就可以调用: ---------------------------------------------------- $.fn.extend()jq对象的拓展方法: $(function()…

jq封装淘宝图片轮播插件

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无缝轮播</title><style>*{ padding:0; margin:0; list-style:none;}.banner{ margin:100px auto; border:5px sol…

jq封装的tab切换

function tab(a,b,c){ $(a).on(c,function(){ $(this).addClass('active').siblings().removeClass('active'); $(b).eq($(this).index()).addClass('active').siblings().removeClass('active'); }) }…

<div id='container' class='container'>盒子</div> <button onClick="f()" >test按钮</button> class JQuery { constructor(name){ this.doc = document.getElementById(name); } html(html){ this.doc.innerHTML = html; return this; } col…

jq封装-无缝滚动效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{ margin:0; padding: 0; } .outer{ position: relative; margin:30px auto; border:1px solid #ccc; border…

JQ 封装全选函数

单击时触发效果: 如果有一个没有选中把全选的勾去了,如果select所有的都选中了,那就把全选勾上 html里: <div class="row cl"> <label class="form-label col-xs-4 col-sm-2 "><span class="c-red">*</span>可购买者等级列表:</label> <div class="formCo…

jq封装插件，简单dome

(function($) { $.fn.extend({ bold: function() { this.css({ fontWeight: "bold", color: 'red' }) } }); })(jQuery); 简单写一个字体颜色加粗颜色为红色. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&g…

jq的ajax交互封装

jq封装的ajax,然后在此前和此后都是很多要考虑的 ,何不想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type="button" value="↑" onclick="changeBidSign('netcreditadmin/bidSignDownA.action',${bidlists.bidId},'UP')"> 这是一个向上的按钮--js方法,…

ajax请求的封装

前端的工作,免不了要用到交互,请求后端的数据,可能大多人一直选择用jq封装好的方法直接使用,要知道封装这个事我们自己也可以的,今天给大家介绍一种封装方法,而且连跨域问题都不在话下,有了这个函数,是不是ajax请求so easy了呢!!下面就是: function ajax(obj){//做网络请求的时候,参数以对象的形式传递进来,用的之后直接传参就ok啦! //规定:obj里面包含属性 //1.url //2.type-----get还是post …

前端复习－02-ajax原生以及jq和跨域方面的应用。

ajax这块我以前一直都是用现成的jq封装好的东西,而且并没有深入浅出的研究过,也没有使用过原生形式的实现.包括了解jsonp和跨域的相关概念但是依然没有实现过,其中有一个重要的原因我认为是我当时并不了解后端的一些操作模式,也并没有掌握任何一门后端的脚本语言,导致没有办法灵活的测试.不过现在完全不存在这个完题了..我已经深入浅出的掌握了python...也有一个现成的django环境可以好好测试一下. 从原生部分谈起: var searchButton = document.getEleme…

左右推拽显示对比图 - jQyery封装 - 附源文件

闲来无事,做了一个模块效果左右拖拽显示对比图,是用jq封装的利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值再配合背景图fixed属性,来制作视觉差效果代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>左右推拽显示对比图</title> <style> body {overflow:hidden;…

JQuery笔记(二)jq常用方法animate()

在jq中,比较方便的是相对于js,jq封装了很多方法,很方便使用,下面我举几个常用的方法 animate()方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="j…

抛弃JQ，回归原生js……

之前我写过一篇文章叫做<jq不会被淘汰>--而事实上它真的不会被淘汰,因为即使在mvvm框架盛行的今天,原生js的api越来越友好的今天,jq依然在用户量上是霸主-- 但是今天我们要讨论的是,抛弃jq,拥抱原生js-- 再说正题之前,我们先来看看jq比js,解决了哪些问题,哪里更优秀 1.首当其冲是浏览器兼容,jq本身做了很多浏览器的兼容,这导致了它的代码变得臃肿,但是不得不说,这方面jq做的很好√ 2.语法比较简洁,jq的代码语法是很简洁的,因为层层封装后,为的就是易用 3.jq封装的aja…

Ajax原理与封装详解

Ajax大家每天都在用,jquery库对Ajax的封装也很完善.很好用,下面我们看一下他的内部原理,并手动封装一个自己的Ajax库. 更多有关ajax封装及数据处理,请参看上海尚学堂<Ajax中replace+Jq封装的ajax>.<ajax+json数据处理> 一.原理原生Ajax的发送需要四步:1) 创建Ajax对象: XMLHttpRequest 2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] ) 3) 设置回调…

jQuery框架-3.jQuery自定义封装插件和第三方插件

一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend Merge the contents of two or more objects together into the first object.把两个或者多个对象合并到第一个对象当中: jQuery.fn.extend Merge the contents of an object onto the jQue…

JS与JQ绑定事件的几种方式.

JS与JQ绑定事件的几种方式 JS绑定事件的三种方式直接在DOM中进行绑定 <button onclick="alert('success')" type="button" id="btn">测试按钮</button> DOM中绑定函数名 <button onclick="testFun" type="button" id="btn">测试按钮<…

【Ajax 3】JavaScript封装Ajax

导读:上一篇博客简单介绍了一下对Ajax中的核心对象XMLHttpRequest的封装.那么为了方便对Ajax的应用,我们还需要进一步的对Ajax的基本功能进行下一步的封装,不得不说的是早就有人专门写JS或者说已经有JQ直接引入使用,所以,本篇博客则是站在一个学习实践的角度,用JavaScript原生代码实现Ajax的简单封装. 一.基本介绍主要是实现了从客户端到服务端发送请求,继而接收服务端响应的结果的过程.在这个实现过程中,一共有3个物件:其一是运用了一个HTML页充当了客户端:其二是运用…

JAVA必背面试题和项目面试通关要点

一数据库 1．常问数据库查询.修改(SQL查询包含筛选查询.聚合查询和链接查询和优化问题,手写SQL语句,例如四个球队比赛,用SQL显示所有比赛组合:举例2:选择重复项,然后去掉重复项:) 数据库里的密码如何加密(md5): (1)数据库的密码加密:单向加密,insert into users (username,password) values ('mike',MD5('guessme')); (2)双向加密:insert into users (username ,password) va…

JQuery笔记(三)选项卡

通过jq封装的方法,可以更简单的制作一个选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="js/jquery-1.12.4.js"></…

JQuery之 serialize() 及serializeArray() 实例介绍

这两个方法都是jq封装的,主要用于form表单. serialize(); 1.创建一个标准url编码显示的文本字符转: 2.操作的对象是表单元素结合的jq对象: serializeArray(); 序列化一个表单元素,将表单元内容编码为一个js数组常用语编码为js格式的字符串不在form标签内的表单控件不会被提交. 没有name属性的表单控件不会被提交. 带有disabled属性的表单控件不会被提交. 没有被选中的表单控件不会被提交一些定义介绍,我们根据实例很容易记忆 <form id=…

再起航，我的学习笔记之JavaScript设计模式12(适配器模式)

适配器模式适配器模式(Adapter): 将一个类(对象)的接口(方法或属性)转化成为另外一个接口,使类(对象)之间接口的不兼容问题通过适配器得以解决. 适配相似的框架不知道大家有没有遇到过这种场景,期初一个项目没有引用jQuery这类js,然后又觉得每次用document对象点出属性很麻烦,于是自己写了个全局的方法,来实现通过id的标识获取元素. function MyQuery (id){ return document.querySelector(id); } 在这个例子中,我们用My…

前后端分离（手）-- 使用mock.js（好样的）

## 前言: 本篇博文昨天七夕写的,一天下来被虐得体无完肤,苦逼的单身狗只能学习,对!我爱学习,关掉朋友圈,并写了一篇博文发泄发泄.这次写mock.js的使用,能使前后端分离,分离,分离,重要的是说三遍. > 特别说明:本篇博文适合单身贵族看.对于其他观众,不负责不承认. --- ## mockjs介绍: 你是否遇见过,前端开发过程中需要数据测试,但后端却迟迟没给你,没感情了分手吧. 是否遇见过需要亲自收集各种各样的数据. 那mock.js便可以很好的帮你解决问题.有了它前端就可以事先模拟数据,…

【Jquery系列】详解Jquery对象和Dom对象

问题描述本篇文章主要讲解Jquery对象和DOM对象,主要围绕如下五个方面来介绍: Jquery对象和dom对象定义 Jquery对象与dom对象区别 Jquery对象及运用举例 dom对象及运用举例 Jquery对象与dom对象相互转换 1 内容区 1.1 Jquery对象和dom对象定义 jQuery对象:Jquery对象,通过jq选择器获取的对象; dom对象:javascript对象,即通过js获取的对象: 1.2 Jquery对象与dom对象区别 jquery对象指通…

PC或者手机弹出窗效果

http://layer.layui.com/ 这个网站提供弹窗,是在jq封装的,弹窗之后,背景页面还可以滑动. 这个里面的js可能也会包含css,这个css不能移动位置,否则会报错,还有谷歌浏览器在F12的controll面板里面可以查看错误,如果某个效果出来不了肯定是里面报错了, 可以查看错误. 谷歌浏览器如果调试手机端界面可以点击右上角的手机就会出现手机模式,一般是选择iphone6 列表页的图片可以在控制器判断是否为空,如果为空传一个默认的路径…

【jq封装】的更多相关文章