jq使用echartr

2024-11-10

Jquery + echarts 使用

常规用法,就不细说了,按照官网一步步来. 本文主要解决问题(已参考网上其他文章): 1.把echarts给扩展到JQuery上,做到更方便调用. 2.多图共存 3.常见的X轴格式化,钻取时传业务实体ID的问题先上图:页面加载时,(第一个图不可以钻取,第二个可以钻取) 2.我们先点击第二个图,进行钻取,如下 3.点击左上角按钮,动态为第一个图添加点击钻取事件,然后点击第一个图进行钻取 1.html页面如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

jq选择器基础

Jquery $代表选择器使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 或者是本地下载好的jq文件使用前要先加入代码,加载后执行: $(document).ready(function(e) { }); 所有jq代码都在大括号里面实现. //Jquery //找元素,Jquery对象 var b = $("#aa"

JQ实现判断iPhone、Android设备

最近做了一版微信宣传页,通过JQ来判断设备,并进行下载微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC 并进行跳转代码如下: function downloadApp(){ var u = navigator.userAgent; var ua = navigator.userAgent.toLowerCase(); var isAndroid = u.indexOf('Android') > -1

jq.validate隐藏元素忽略验证

jq.validate隐藏元素忽略验证现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输入进行了验证,要如何才能当隐藏input框时,可以跳过验证呢. jq.validate提供了方法,ignore属性,具体使用如下: $("#formId").validate({ ignore: $('#ycyId'),//隐藏域的id }); 根据上面的方式就可以将隐藏元素进行忽略. 如

jq.validate 自定义验证两个日期

jq.validate 自定义验证两个日期首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用jq.validate中的validator.addMethod()自定义验证. 具体方法如下: jQuery.validator.addMethod("dateCheck", function() { var date1= $("# date1").val(); var

jq方法中 $(window).load() 与 $(document).ready() 的区别

通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.onload就是等页面全加载后再执行,具体细节不知. 今天做项目时遇到一个问题,用的是jq,简单的道理是通过动态获取图片的高度(因为是手机端,宽高是自适应的),来调整图片下面main_body的top值(因为图片跟mian_body有需要拼接的地方),代码如下: $(function(){ var i

jq 根据值的正负变色

效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class="pro_detail">  <ul> <li>001</li> <li>椰香奶茶<

jq 个性的隔行变色

效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class="pro_detail">  <ul> <li>001</li> <li>椰香奶茶</li> <li>￥ 10.00</li> <li>￥ 10.50&

关于JQ toggle 的注意事项

1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.

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选择器: 基础选择器 * 通用元素选择器,匹配页面任

Js（DOM）和Jq 对象的相互转换

JQuery 对象不能使用DOM对象中的方法,同样,Dom对象不能使用JQuery 中的方法,但有时候 ,我们不得不使用JQuery的方法或者 Dom对象的方法,该怎么办呢? 下面介绍一下 jq对象与Dom对象的相互转换. jq--->dom JQuery提供了两种方法来转换 [index] 和 get(index); 方法一 var $cr=$("#cr"); //jq对象 var cr = $cr[0]; //jq 转dom 方法二 var cr=$("

jq仿淘宝放大镜插件

html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" height="400"> <div id="dow"></div> </div> //大图 <div id="bigPhotoBox"></div> css部分 #photoBox {

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

【JQ+锚标记实现点击页面回到顶部】

前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑着走的,还给小白挥了挥手,微笑一个.那句话叫什么来着,佛祖虽给你关了一扇门,说不定会再给你开一扇窗.明天我就换工作了,我感谢我的同学. a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方

有了jsRender，妈妈再也不用担心我用jq拼接DOM拼接的一团糟了、页面整齐了、其他伙伴读代码也不那么费劲了

写在前面说来也很巧, 下午再做一个页面,再普通不过的分页列表,我还是像往常一样,基于MVC环境下,我正常用PagedList.MVC AJAX做无刷新分页,这时候问题就来了,列表数据中有个轮播图用到了slides.js插件,轮播图也用到了分页,数据第一页轮播图页码能正常使用,数据列表翻到第二页则轮播图的页码就无法正常使用,实际上PagedList.MVC自带的样式文件已经和slides.j自带的样式文件冲突,我还特意修改了slides.js的样式文件,然并无卵用,让郁闷飞一会... 1.基于M

jq倾斜的动画导航菜单

效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器完整源代码,保存到HTML文件打开也可查看效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JQ基础之选择器

JQ选择器与CSS/CSS3选择器非常类似,对于学过CSS/CSS3的朋友来说可以是快速上手,下面总结了比较常用的选择器. ID选择器 $('#one') ( '#'代表ID ) CLASS选择器 $('.two') ( '.'代表类 ) 元素选择器 $('ul') ( 选取'ul'标签 ) $('#one>span') 属性选择器 $('[class]') ( 所有具有'class'属性的元素 ) $('li[class]') ( 选中'li'下的具有'class

bootstrap无限级分类 jq拓展之前的无限级分类的封装版~

git地址:https://github.com/zhangjiahao93/jQ.select HTML部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多级联动封装</title> <link href="./css/bootstrap.css" rel="st

jq attr()改变checkbox的checked无效！！！！

今天做项目发现用attr()改变checked,实现全选功能的时候发现,第一次点击有效,之后点击全选功能便实效. 一开始以为是自己写错了,在各种碰壁之后,才猛然发现,原来这是jq的一个小bug. 在jquery 1.6之后的版本中,改变元素的boolean类型属性用prop才能生效,而其他类型属性则继续沿用attr(); $('input').attr('checked',true);应该写为:$('input').prop('checked',true); ps:(第一次写技术博客,就简单点吧

js之 matches （可以取代jq的 delegate 方法）

问题:请给#wrap 下面的子元素添加点击事件! <div id="wrap"> <a class="btn" href="http://www.lyblog.net">点击代码</a> <span class="btn">不可点击按钮</span> </div> jq的写法 //jQueryObject.on( events [, selector ]

jq使用echartr

热门专题