JQuery
关注
分享
扫一扫
文章平均质量分 58
houyanhua1
这个作者很懒，什么都没留下…
展开
-
JQuery 自定义的工具函数，将Form表单中的表单项转成Json对象。
demo.js：//将form表单中的表单项转成Json对象。 基于JQuery。$.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); //this就是函数的调用者,其实就是form表单对象。 $(array).each(functio...原创 2018-09-11 22:11:42 · 323 阅读 · 0 评论 -
JQuery Validate校验插件
JQuery Validate插件教程： https://www.cnblogs.com/linjiqin/p/3431835.html原创 2018-01-08 17:43:25 · 239 阅读 · 0 评论 -
JQuery 主页面调用子页面(<iframe>)中的JS方法，子页面调用主页面的JS方法
//调用子页面的方法.var childWindow = $("#addFrame")[0].contentWindow; //表示获取了嵌入在iframe中的子页面的window对象。 []将JQuery对象转成DOM对象，用DOM对象的contentWindow获取子页面window对象。childWindow.subFunction(); //调用子页面中的subFunction方法原创 2018-01-15 14:50:57 · 24307 阅读 · 1 评论 -
JSON 将JSON字符串(日期类型，毫秒数)转成日期正常格式
//将序列化成json日期字符串(毫秒数)转成正常日期格式 function ChangeDateFormat(cellval) { var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10)); var month = date.原创 2017-12-30 10:15:43 · 4160 阅读 · 0 评论 -
JSON form表单中的数据序列化成JSON格式
XXX.html （XXX.aspx）：//获取用户在添加表单中输入的数据var pars = $("#addUserForm").serializeArray(); //(JQuery中的函数)将form表单中的数据序列化成JSON对象格式{"UserName":"张三","UserPwd":"123456"}$.post("AddUserInfo.ashx", pars, funct原创 2017-12-29 20:25:42 · 592 阅读 · 0 评论 -
JSON 服务器端返回多个JSON对象。(匿名类)
服务器返回一个参数：浏览器端(XXX.html XXX.aspx)：$.post("XXX.ashx", { "第一个参数": 123,"第二个参数":456 }, function (data) { var serverData = $.parseJSON(data); //JQuery中的自带函数，将data(JSON字符串)解析成JSON对象数组。 [{userna原创 2017-12-29 19:58:15 · 4421 阅读 · 0 评论 -
JQuery 实例：标签切换
标签切换 .title { width:100px; height:25px; border:1px solid red; margin:3px; float:left; } .content { width:430px; height:300px; border:1px solid blue; clear:both; }原创 2017-12-19 16:43:35 · 228 阅读 · 0 评论 -
JQuery 动画实例：下拉列表框展开收起
动画实例 列表展开 $(function() { $('span').css('cursor','pointer') .click(function(){ $(this).next().next().slideToggle(1000); }); }); 我的好友 中国 巴原创 2017-12-19 15:59:18 · 3730 阅读 · 0 评论 -
JQuery 自定义动画( animate() )
自定义动画：animate(样式，时间)只能对数字类型的样式设置动画使用链式编程，可以将多个动画拼接起来选择器“:animated”，选择正在执行动画的元素停止动画：stop();如果不传递参数，表示停止当前动画，后续动画会继续执行传递参数true，表示停止当前动画，并且清除所有的动画队列 自定义动画 #div1 { width:100px;原创 2017-12-19 15:41:45 · 228 阅读 · 0 评论 -
JQuery 渐变显示隐藏动画 ( fadeIn(),fadeOut(),fadeTo() )
$('#div1').fadeIn(1000); //渐变显示。1000毫秒，表示动画显示过程时间。$('#div1').fadeOut(1000); //渐变隐藏$('#div1').fadeToggle(1000); //合成显示隐藏$('#div1').fadeTo(1000,0.5); //半透明显示到0.5。 CSS属性opacity 透明度(0-1)。原创 2017-12-19 14:58:41 · 3243 阅读 · 0 评论 -
JQuery 向下展开收起动画( slideDown(),slideUp() )
$('#div1').slideDown(1000); //向下展开，下拉。1000毫秒，表示动画展开过程时间。$('#div1').slideUp(1000); //向上收起$('#div1').slideToggle(1000); //合成展开收起 下拉收起动画 #div1 { width:100px; height:100px; back原创 2017-12-19 14:49:56 · 12953 阅读 · 2 评论 -
JavaScript 上传图片效果立即显示 JS插件
demo.html: uploadPreview演示 window.onload = function () { new uploadPreview({ UpBtn: "up_img", DivShow: "imgdiv", ImgShow: "imgShow" }); }原创 2018-03-01 10:39:08 · 925 阅读 · 0 评论 -
JQuery 案例:突出显示 (透明度,children(),siblings())
demo.html： * { margin: 0; padding: 0; } ul { list-style: none; } body { background: #000;原创 2018-03-19 10:13:51 · 402 阅读 · 0 评论 -
JQuery JQuery插件，jquery-OCUpload文件上传
插件下载：https://pan.baidu.com/s/1gj3Gxoa27neBX1G61-UNKA 密码：f60t demo.html（文件上传,但不会刷新页面(底层是刷新iframe标签;Ajax不可以上传文件)）：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w...原创 2018-09-11 11:31:50 · 344 阅读 · 0 评论 -
Ajax JQuery,跨域名访问(jsonp)
demo.html（前端JQuery Ajax跨域名访问）：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type=&qu原创 2018-03-26 20:51:27 · 718 阅读 · 0 评论 -
Ajax JQuery,Jsonp跨域名访问(调用外部天气服务)
demo.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>原创 2018-03-27 10:03:12 · 458 阅读 · 0 评论 -
JQuery 自定义JQuery插件
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.js"&原创 2018-03-19 21:10:29 · 248 阅读 · 0 评论 -
JQuery JQuery第三方插件(jquery.lazyload.js),懒加载(页面拉到下面才去加载图片)
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { hei原创 2018-03-19 20:49:02 · 684 阅读 · 0 评论 -
JQuery JQuery第三方插件(jquery.color.js)，动画，改变背景色的动画
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { wid原创 2018-03-19 20:19:28 · 6584 阅读 · 0 评论 -
JQuery 多库共存,引入多个JQuery版本
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.8.2.min.js"&原创 2018-03-19 20:03:24 · 1448 阅读 · 0 评论 -
JQuery 隐式迭代(each()遍历)
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> li { widt原创 2018-03-19 19:48:39 · 707 阅读 · 1 评论 -
JQuery 事件对象的常见属性
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.js"&原创 2018-03-19 18:06:05 · 216 阅读 · 0 评论 -
JQuery 事件触发的三种方式(trigger,triggerHandler)
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.js"&原创 2018-03-19 17:49:38 · 1744 阅读 · 0 评论 -
JQuery 事件绑定和解绑(bind,delegate,on)
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.1.js"&原创 2018-03-19 17:18:23 · 874 阅读 · 0 评论 -
JQuery offset、position、scroll
demo.html：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { he原创 2018-03-19 16:27:58 · 316 阅读 · 0 评论 -
JSON demo： AJAX从服务器返回的数据类型设置为JSON对象
html页面中： $(function() { //声明从服务器返回的数据类型是JSON对象类型。 $("#btnData").click(function() { $.post("GetJson.ashx", {}, funct原创 2017-12-27 18:17:12 · 601 阅读 · 0 评论 -
JQuery 显示隐藏动画( show(),hide(),toggle() )
$('#div1').show(1000); //显示。1000毫秒，表示动画显示过程时间。$('#div1').hide(1000); //隐藏$('#div1').toggle(1000); //合成显示隐藏 显示隐藏动画 #div1 { width:100px; height:100px; background-color:black; }原创 2017-12-19 14:33:15 · 8237 阅读 · 0 评论 -
JQuery 实例：微博 显示添加'@好友',添加小表情
腾讯微博 var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴', '8.gif': '睡', '9.gif': '大哭', '10.gi原创 2017-12-19 12:14:23 · 445 阅读 · 0 评论 -
JQuery 链式编程
$(function() { $('li').hover(function() {//鼠标指向 $(this).css({ 'color': 'red', 'cursor':'pointer' }); },原创 2017-12-17 20:31:39 · 660 阅读 · 0 评论 -
JQuery 过滤选择器
过滤选择器：第一次选择之后，再一次进行选择。$('div') //选择器，第一次选择$('div:first') //第一个元素$('div:last') //最后一个元素$('div:gt(2)') //下标大于2的所有元素。下标从0开始。$('div:lt(2)') //下标小于2的所有元素。下标从0开始。前两个元素。$('div:eq(2)') //下标等原创 2017-12-17 21:01:58 · 204 阅读 · 0 评论 -
JQuery 点击实现开关灯，改变CSS属性值
$(function() { $('#btnLight').click(function () { if (this.value == '关灯') { $('body').css('background-color', 'black'); $(this).val(原创 2017-12-17 19:39:41 · 1235 阅读 · 0 评论 -
JQuery 设置样式属性
$(function () { //设置样式 //$('#btnShow').css('background-color', 'red'); //设置单个样式。$('#btnShow').css('background-color') 表示获取样式的值 //设置多个样式，多个样式之间用逗号隔开。 $原创 2017-12-17 19:31:50 · 279 阅读 · 0 评论 -
JQuery text(),html()
text(),html()。相当于JavaScript中的innerHTML属性。 $(function () { //将jquery对象转换成dom对象：通过jquery的选择器得到的数组,通过[下标]的形式返回dom对象 //将dom对象转换成jquery对象：dom对象加$()就转换成do原创 2017-12-17 12:10:23 · 273 阅读 · 0 评论 -
JQuery 加法计算器
$(function () { //为按钮绑定点击事件 $('#btnAdd').click(function () { //获取文本框中的值，并转换成整数 var num1 = parseInt($('#txtNum1').val()); var num原创 2017-12-17 11:51:02 · 543 阅读 · 0 评论 -
JQuery 加载就绪(ready)
//为window的onload事件注册处理函数，表示页面加载完成后触发执行 //标签加载完成，并且标签指定的资源也加载完成 //onload = function() { //}; //表示加载就绪后执行此代码:dom就绪，指标签加载完成，这时，标签指定的资源可能还没有加载完成 //$(document).read原创 2017-12-14 17:31:40 · 212 阅读 · 0 评论 -
JQuery 事件
//对于value属性的一种简写操作 //$('#btnShow').attr('value');=> $('#btnShow').val(''); value属性的简写 //为按钮绑定点击事件。 html中的事件一般去掉on就是JQuery的事件 //$('#btnShow').click(function() { /原创 2017-12-14 17:29:06 · 273 阅读 · 0 评论 -
JQuery 操作属性
//操作属性 //获取属性的值：只写第一个参数，属性的名字 //alert($('#btnShow').attr('value')); //设置属性的值：写两个参数，第一个表示属性的名字，第二个表示值 //$('#btnShow').attr('value', 'Hello World');原创 2017-12-14 17:25:03 · 181 阅读 · 0 评论 -
JQuery 简介
JQuery是一个JavaScript库，可以跨平台(兼容各种浏览器)，简化JavaScript的开发。JQuery的引入： onload = function() { //jquery->$ $就是jquery的简写 //jquery对象：本质就是dom的一个数组原创 2017-12-14 17:22:56 · 229 阅读 · 0 评论 -
JQuery 第三方插件，jqzoom插件，图片放大镜
插件下载：http://www.jb51.net/jiaoben/29216.html 官方下载：http://www.mind-projects.it/projects/jqzoom/1、 2、 3、 jqzoom图片放大镜插件 $(function () { $('.jqzoom').原创 2017-12-20 15:57:27 · 569 阅读 · 0 评论 -
JQuery 第三方插件，UI插件，显示对话框
插件下载链接：http://jqueryui.com/download/all/1、 2、 3、 示例代码路径：jquery-ui-1.8.20\demos 插件的css路径：jquery-ui-1.8.20\themes\base\minified\jquery-ui.min.css css的images路径：jquery-ui-1.8.20\t原创 2017-12-20 14:24:42 · 391 阅读 · 0 评论