爱周末 » jquery

jquery获取div元素属性内容attr的用法

zhangc — Thu, 24 Dec 2015 01:36:01 +0000

jQuery如何获取元素的属性值的内容呢，一起看下例子：

下面的例子获取div中 style 属性的内容。



test1
test2
test3

jQuery获取一组单选按钮的值

zhangc — Wed, 28 Oct 2015 06:24:46 +0000

var sexVal=$(“input:radio[name=’sex’][checked]”).val();
alert(sexVal);

JavaScript去除字符串前后空格的trim方法

zhangc — Tue, 14 Jul 2015 06:33:29 +0000

相比vbscript，javascript在字符串处理方面已经很强大了，但是偏偏缺少去除字符串前后空格的trim方法。

//clear the right and left space
function trim(s){
return trimRight(trimLeft(s));
}

//clear the left space
function trimLeft(s){
if(s == null) {
return "";
}
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(0)) != -1) {
var j=0, i = str.length;
while (j < i && whitespace.indexOf(str.charAt(j)) != -1){
j++;
}
str = str.substring(j, i);
}
return str;
}

//clear the right space
function trimRight(s){
if(s == null) return "";
var whitespace = new String(" \t\n\r");
var str = new String(s);
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){
var i = str.length - 1;
while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){
i--;
}
str = str.substring(0, i+1);
}
return str;
}

http://alany.blog.51cto.com/6125308/1658938

easyui datagrid数据表格浏览器窗口自适应大小代码

zhangc — Thu, 04 Jun 2015 05:07:36 +0000

在jquery easyui datagrid 中，客户电脑分辨率不同，往往会造成分页不在一屏幕内显示，如何做到自适应呢？看下面代码：


$('#tt').datagrid('resize',{
    height: window.innerHeight - otherHeight, // otherHeight 表格以上元素高度
    width: window.innerWidth //根据实际情况计算出的宽度
});

各种高度和宽度参考：
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

jquery判断复选框checkbox是否选中(attr获取checked)

zhangc — Thu, 29 Jan 2015 03:22:10 +0000

在表单中常用到使用jquery判断复选框checkbox是否选中来进行一些勾选后的其他操作，下面分享一下jquery判断checkbox是否选中的一种方式。

复选框是否选中


var isChk=$("#chk").attr("checked");
if(isChk)
{
//选中时处理的内容
}
else
{
//未选中时处理的内容
}

jquery表单提交获取元素值并显示

zhangc — Sun, 28 Sep 2014 03:20:53 +0000

看下面的例子，控制jquery对象，表单提交后，通过jquery中的方法获取元素的值，并将获取的数据显示出来。

html代码如下：





控制jQuery对象






请输入如下信息

姓名：

性别：男
女

婚否：

jQuery对象与dom对象相互转换

zhangc — Fri, 12 Sep 2014 01:28:06 +0000

刚开始学习jQuery，可能一时会分不清楚哪些是jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。

什么是jQuery对象？

—就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。

比如：

$(“#test”).html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById(“id”).innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$(“#test”).innerHTML、document.getElementById(“id”).html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById(“id”)得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是 jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

jQuery对象转成DOM对象：

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：

var $v =$(“#v”) ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：

var $v=$(“#v”); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：

var v=document.getElementById(“v”); //DOM对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

Jquery的ajax在IE提交数据乱码解决方法

zhangc — Tue, 17 Jun 2014 09:43:29 +0000

乱码是因为编码不同而造成的。在ajax post 或 get时都有可能出现乱码。

为了避免乱码，可以做到以下几步

解决方法
1，保持编码的统一，包括文件编码，数据库编码，网页content-type编码
检查一下

建议中文都是用UTF-8，使用gbk/gb2312有可能会出现乱码

2，使用post来发送而不是get
get方法是会通过链接来传递参数，而且会自动urlEncode(编码)，而各个浏览器编码的方式可能不太一样。使用post可以避免这种情况。

3，通过在js前端escape编码再发送，然后后台解码取得数据
这些可以在网上搜索

4，在全局设定contentType，指定编码
因为jquery ajax是使用utf-8来编码发送数据的，ie在发送时却没加上charset=utf-8，从而导致乱码(IE默认使用iso-8859-1编码)

$.ajaxSetup({
contentType: “application/x-www-form-urlencoded; charset=utf-8″
});

jquery 倒计时返回指定页面

zhangc — Wed, 28 May 2014 08:35:57 +0000

404页面上常用到倒计时返回指定页面，下面是jquery和php结合倒计时返回指定页面，代码如下：

$url=”http://zhoumo123.cn/“;
$num=”10″;
?>




系统在  秒后自动跳转到首页。

响应式TAB-FullWidthTabs

zhangc — Thu, 22 May 2014 03:37:16 +0000

响应式TAB-FullWidthTabs

在PC和移动设备上的显示效果如下图，根据屏幕大小，采用不同布局来展示内容。

演示地址 http://tympanus.net/Blueprints/FullWidthTabs/

下载地址 http://tympanus.net/Blueprints/FullWidthTabs/FullWidthTabs.zip