原生或者jquery 的开关咋写

2024-09-06

使用jQuery实现类似开关按钮的效果

转自:http://www.cnblogs.com/linjiqin/p/3148228.html 本案例实现类似开关按钮效果. 页面有下拉列表.文本框.按钮等表单元素,大致实现如下效果:1.页面一加载时,文本框隐藏,下拉列表显示,按钮值变为“显示文本框”.2.点击“显示文本框”按钮时,文本框显示,下拉列表隐藏,按钮值变为“显示下拉列表”.3.点击“显示下拉列表”按钮时,文本框隐藏,下拉列表显示,按钮值变为“显示文本框”. <!DOCTYPE HTML PUBLIC "-//W3C//DT

图片轮播(左右切换)--JS原生和jQuery实现

图片轮播(左右切换)--js原生和jquery实现左右切换的做法基本步骤跟上一篇文章淡入淡出类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在

图片轮播(淡入淡出)--JS原生和jQuery实现

图片轮播(淡入淡出)--js原生和jquery实现图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的di

javascrit原生实现jquery的append()函数

/** * javascrit原生实现jquery的append()函数 * @param parent * @param text */ function append(parent, text) { if (typeof text === 'string') { var temp = document.createElement('div'); temp.innerHTML = text; // 防止元素太多进行提速 var frag = document.createDocumentFr

js中return false; jquery中需要这样写：return false(); Jquery 中循环 each的用法 for循环

js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(function(m){ //m变量为数字索引,从0开始表示元素的下标索引var checkname=$(".progressName:eq("+m+")").text();//获得每个上传的文件名if(checkname==oldname_wenjiaming){

Python菜鸟之路：原生Ajax/Jquery Ajax/IFrame Ajax的选用

原生Ajax Jquery Ajax IFrame Ajax 如果发送的是普通的数据,比如用户简单的输入.选择的值,推荐使用Jquery ,其次用XMLHttpRquest对象,最次使用IFrame Ajax 如果发送的是文件的数据,比如用户上传的文件.图片等,IFrame Ajax首选

checked、disabled在原生、jquery、vue下不同写法

以下是原生和jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #tab{ width: 300px; margin: 30px auto; } .tab-nav{ display: flex; } .tab-nav a

瀑布流的三种实现方式（原生js+jquery+css3）

前言项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀑布流-javascript</title> <st

JS原生Ajax&Jquery的Ajax技术&Json

1.介绍Ajax Ajax = 异步 JavaScript 和 XML Ajax是一种创建快速动态网页的技术通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味着可以不用整个页面进行刷新而是可以进行局部刷新.这也是使用Ajax 的优点而传统页面如果要更新内容,必须重载整个网站页面. 1.1什么是同步,什么是异步同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随

标签页（tab）切换的原生js,jquery和bootstrap实现

概述这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容标签页(tab)切换的原生js实现标签页(tab)切换的jquery实现标签页(tab)切换的bootstrap实现 js实现说明: 代码是我自己写的,与课程中的不一样. 主要利用display:none来把部分内容隐藏而显示其它内容. 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的. 代码: <!DOCTYPE html>

jquery 中的一写常用方法

$('form').submit(); // 表单提交 window.parent.location.reload(); // 子窗口刷新父页面 window.location.reload(); // 刷新当前页面 $('input').blur(function () {...... }) // 当鼠标从input框中移出是发生的事件 $('.addwork').live('click',function () { $('#hrcboxClose').css('visibility','hi

原生和jQuery的ajax用法

jQuery的ajax方法: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:true, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json', //返回的数据格式:json/xml/html/script/jsonp/text beforeSend:function(xhr){ console.log(xhr) consol

Ajax 原生和jQuery的ajax用法

https://www.cnblogs.com/jach/p/5709175.html form数据的序列化: $('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name,把数据序列化成字符串:eg:name=yang $('#form').serializeArray(); //会根据input里面的name,把数据序列化成数组:eg:[object] //注意:没有name会获取不到值 //下面两种不是jQ

深浅拷贝，原生和JQuery方法实现

7-17: 1:e.target.parentNode.remove();成功,查询一下JS原生的remove方法 2:复习JS DOM的原生操作方法,比如innerHTML(),insertBefore()等 3:技术之瞳 4:jquery的each,map等方法 5:对象的深浅拷贝影响到push 到数组后的值全都一样 http://blog.csdn.net/fungleo/article/details/54931379

原生和jquery 的 ajax

form数据的序列化: $('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name,把数据序列化成字符串:eg:name=yang $('#form').serializeArray(); //会根据input里面的name,把数据序列化成数组:eg:[object] //注意:没有name会获取不到值 //下面两种不是jQuery的方法 JSON.parse() //json字符串转化为json对象 JSON

使用原生实现jquery中的css方法

由于jquery放在mobile页面上,有时候还是显得有点大,所以今天尝试使用原生来开发,但是习惯了jquery之后,转用原生开发之后,发现原生中,找不到可以替代jquery的css方法,于是对原生的HTMLElement做了一点小扩展,代码如下: HTMLElement.prototype.css = function(styles) { for (style in styles) { this.style.setProperty(style, styles[style]); } }; 使用方

jQuery插件的怎么写

对于jQuery之前一直用,也看到过别人写的插件,直到最近才想着学习怎么写自己的jQuery插件,今天看了网上的一些资料,发现其实很简单的. 先看一个简单的jQuery插件的例子 <script> (function($){ $.fn.extend({ "bold":function(){ return this.css({fontWeight:"bold"}); }, "red":function(){ return this.cs

tab选项卡切换(js原生、jQuery )

思路: ① 遍历Tab选项 ② 然后给每个Tab选项绑定点击事件 ③ 每次点击时清除所有Tab选项及Tab选项内容的样式,然后给当前Tab选项添加标记样式,给当前Tab选项添加显示样式 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #tab

JS去掉首尾空格简单方法大全(原生正则jquery)

JS去掉首尾空格简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|(\s*$)/g, ""); //去除左边空格 osfipin.replace(/(^\s*)/g, ""); //去除右边空格 osfipin.replace(/(\s*$)/g, ""); //jquery 需提前引用jquery $.trim(o

H5-移动端实现滑屏翻页-原生js/jquery

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

jQuery+html+css-自己写的分页

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>page</title> </head> <style> *{margin: 0;padding: 0;} #page{ height: 40px; border: 1px solid #777; margin: 200px auto

原生或者jquery 的开关咋写

热门专题