JQuery语法总结和注意事项

1、关于页面元素的引用
  通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
  只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。
  普通的dom对象一般可以通过$()转换成jquery对象。
  如:$(document.getElementById(msg))则为jquery对象,可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。
如:$(#msg)[0],$(div).eq(1)[0],$(div).get()[1],$(td)[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:

程序代码
$(#msg).html();
$(#msg)[0].innerHTML;
$(#msg).eq(0)[0].innerHTML;
$(#msg).get(0).innerHTML;

3、如何获取jQuery集合的某一项
  对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个div元素的内容。有如下两种方法:

程序代码
$(div).eq(2).html(); 调用jquery对象的方法
$(div).get(2).innerHTML; 调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
$(#msg).html(); 返回id为msg的元素节点的html内容。
$(#msg).html(bnew contentb);
将“bnew contentb” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$(#msg).text(); 返回id为msg的元素节点的文本内容。
$(#msg).text(bnew contentb);
将“bnew contentb” 作为普通文本串写入id为msg的元素节点内容中,页面显示bnew contentb

$(#msg).height(); 返回id为msg的元素的高度
$(#msg).height(300); 将id为msg的元素的高度设为300
$(#msg).width(); 返回id为msg的元素的宽度
$(#msg).width(300); 将id为msg的元素的宽度设为300

$(input).val(); 返回表单输入框的value值
$(input).val(test); 将表单输入框的value值设为test

$(#msg).click(); 触发id为msg的元素的单击事件
$(#msg).click(fn); 为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
  对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:

程序代码
$(p).each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]})
为索引分别为0,1,2的p元素分别设定不同的字体颜色。

$(tr).each(function(i){this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]})
实现表格的隔行换色效果

$(p).click(function(){alert($(this).html())})
为每个p元素增加了click事件,单击某个p元素则弹出其内容

6、扩展我们需要的功能

程序代码
$.extend({
min function(a, b){return a bab; },
max function(a, b){return a bab; }
}); 为jquery扩展了min,max两个方法

使用扩展的方法(通过“$.方法名”调用):
alert(a=10,b=20,max=+$.max(10,20)+,min=+$.min(10,20));

7、支持方法的连写
所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
$(p).click(function(){alert($(this).html())})
.mouseover(function(){alert(‘mouse over event’)})
.each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]});

8、操作元素的样式
主要包括以下几种方式:
$(#msg).css(background); 返回元素的背景颜色
$(#msg).css(background,#ccc) 设定元素背景为灰色
$(#msg).height(300); $(#msg).width(200); 设定宽高
$(#msg).css({ color red, background blue });以名值对的形式设定样式
$(#msg).addClass(select); 为元素增加名称为select的class
$(#msg).removeClass(select); 删除元素名称为select的class
$(#msg).toggleClass(select); 如果存在(不存在)就删除(添加)名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
如:
$(#msg).click(function(){alert(good)}) 为元素添加了单击事件
$(p).click(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][i]})
为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
当鼠标放在表格的某行上时将class置为over,离开时置为out。
$(tr).hover(function(){
$(this).addClass(over);
},
function(){
$(this).addClass(out);
});
(2)ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert(Load Success)})
页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
(3)toggle(evenFn,oddFn) 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
每次点击时轮换添加和删除名为selected的class。
$(p).toggle(function(){
$(this).addClass(selected);
},function(){
$(this).removeClass(selected);
});
(4)trigger(eventtype) 在每一个匹配的元素上触发某类事件。
例如:
$(p).trigger(click); 触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype) 事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
例如:
$(p).bind(click, function(){alert($(this).text());}); 为每个p元素添加单击事件
$(p).unbind(); 删除所有p元素上的所有事件
$(p).unbind(click) 删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。

$.each( [0,1,2], function(i, n){ alert( Item # + i + + n ); });
等价于:
var tempArr=[0,1,2];
for(var i=0;itempArr.length;i++){
alert(Item #+i+ +tempArr[i]);
}
也可以处理json数据,如
$.each( { name John, lang JS }, function(i, n){ alert( Name + i + , Value + n ); });
结果为:
Namename, ValueJohn
Namelang, ValueJS
$.extend(target,prop1,propN):用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。这是jquery实现的继承方式。
如:
$.extend(settings, options);
合并settings和options,并将合并结果返回settings中,相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
合并defaults和options,并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数(合并多项并返回)
$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。
如:
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为:[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i 0 i + 1 null; });
tempArr内容为:[2,3]
$.merge(arr1,arr2)合并两个数组并删除其中重复的项目。
如:$.merge( [0,1,2], [2,3,4] ) 返回[0,1,2,3,4]
$.trim(str):删除字符串两端的空白字符。
如:$.trim( hello, how are you ); 返回hello,how are you

12、解决自定义方法或其他类库与jQuery的冲突
  很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
  使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法$(#msg)改为jQuery(#msg)。
如:
jQuery.noConflict();
开始使用jQuery
jQuery(div p).hide();
使用其他库的 $()
$(content).style.display = ‘none’;

发表在 Jquery常用知识 | JQuery语法总结和注意事项已关闭评论

JSONP跨域

JSONP原理及最简单的JSONP实现记事本_美文收集 2009-03-02 19:19:08 阅读222 评论0 字号:大中小
1) 什么是JSONP?

  JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

  2) 如何使用JSONP?

  1. 在客户端调用提供JSONP支持的URL Service,获取JSONP格式数据。

  比如客户想访问http://www.yiwuku.com/myService.aspx?jsonp=callbackFunction

  假设客户期望返回JSON数据:[“customername1″,”customername2″]

  那么直正返回到客户端的Script Tags: callbackFunction([“customername1″,”customername2″])

  可能的调用方式:

  

  3. 页面展示

  

  4. 最终Page Code

  

  

  

  Top Customers with Callback

  

  

  

  

  

  

  

  3) JSONP在JQuery中如何体现的

  1. $.getJSON

  

  jsoncallback=?,其中?会自动替换为function(data)函数。

  2. $.ajax

  $.ajax({

  dataType: ‘jsonp’,

  data: ‘id=10’,

  jsonp: ‘jsonp_callback’,

  url: ‘http://www.yiwuku.com/getdata’,

  success: function () {

  // do stuff

  },

  });

  4) 如何在服务器端实现对JSON支持?

  这仅仅需要把服务的JSON数据转换成想要的script tags的形式就可以了,格式可以自已定义,毕竟这是个非官方的协议。

  可参考:Implement JSONP in your Asp.net Application

  注:Callback仅仅是JSONP的简单实现,可以根据具体需要实现更复杂的功能,比如可以在客户端动态集成更多的变量数据来完成分页功能。

什么是JSONP协议?

JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求,我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递javascript对象。这种跨域的通讯方式称为JSONP。

很明显,JSONP是一种脚本注入(Script Injection)行为,需要特别注意其安全性。

在asp.net中实现简单的JSONP非常简单。我们需要两个页面,分别承担协议的客户端和服务器端角色。

假设我们有两个站点,http://www.baa.com.cn 和 http://www.bitauto.com

我们的客户端页面为 http://www.baa.com.cn/JSONPClient.aspx ;而我们的服务器端页面为 http://www.bitauto.com/JSONPServer.aspx 。

首先,我们来做客户端页面:

==========Javascript代码段1:JSONP客户端发送请求的方法=================

function CallJSONPServer(url){                                 // 调用JSONP服务器,url为请求服务器地址

    var oldScript =document.getElementById(url);       // 如果页面中注册了调用的服务器,则重新调用
    if(oldScript){
    oldScript.setAttribute("src",url);
    return;
    }
    var script =document.createElement("script");       // 如果未注册该服务器,则注册并请求之
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src",url);
    script.setAttribute("id", url);
    document.appendChild(script);
}

——————END————————

===========Javascript代码段2:JSONP客户端对服务器开放的接口方法=======================

function OnJSONPServerResponse(obj){
    alert(obj);
}

——————END————————

===========HTML代码段1:JSONP客户端向用户提供的UI===============


——————END————————

至此,JSONP客户端完成,接下来我们做JSONP服务器端页面:

============C#代码段1:应答JSONP客户端请求================

protected void Page_Load(object sender, EventArgs e)
{
    Response.DisableKernelCache();
    Response.Cache.SetNoStore();
    Response.Write("OnJSONPServerResponse('" + DateTime.Now.ToString() + "');");
    Response.End();
}

——————END————————

OK,我们现在就完成了,您不妨自己实践一下。

发表在 Jquery常用知识 | JSONP跨域已关闭评论

Jquery选择器

基本选择器

id选择器(指定id元素)
将id=”one”的元素背景色设置为黑色。(id选择器返单个元素)
$(document).ready(function () {
$(’#one’).css(‘background’, ‘#000’);
});

  1. class选择器(遍历css类元素)
    将class=”cube”的元素背景色设为黑色

$(document).ready(function () {
$(’.cube’).css(‘background’, ‘#000’);
});

  1. element选择器(遍历html元素)
    将p元素的文字大小设置为12px

$(document).ready(function () {
$(‘p’).css(‘font-size’, ‘12px’);
});

  1. * 选择器(遍历所有元素)
    $(document).ready(function () {
    // 遍历form下的所有元素,将字体颜色设置为红色
    $(‘form *’).css(‘color’, ‘#FF0000’);
    });
  2. 并列选择器
    $(document).ready(function () {
    // 将p元素和div元素的margin设为0
    $(‘p, div’).css(‘margin’, ‘0’);
    });

层叠选择器:

$(“form input”) 选择所有的form元素中的input元素
$(“#main > *”) 选择id值为main的所有的子元素
$(“label + input”) 选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$(“#prev ~ div”) 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

过滤选择器

基本过滤选择器:

$(“tr:first”) 选择所有tr元素的第一个
$(“tr:last”) 选择所有tr元素的最后一个
$(“input:not(:checked) + span”) 过滤掉:checked的选择器的所有的input元素

$(“tr:even”) 选择所有的tr元素的第0,2,4… …个元素(注意:因为所选择的多个元素时为数组,所以序号是从0开始)

$(“tr:odd”) 选择所有的tr元素的第1,3,5… …个元素
$(“td:eq(2)”) 选择所有的td元素中序号为2的那个td元素
$(“td:gt(4)”) 选择td元素中序号大于4的所有td元素
$(“td:ll(4)”) 选择td元素中序号小于4的所有的td元素

内容过滤选择器:

$(“div:contains(‘John’)”) 选择所有div中含有John文本的元素
$(“td:empty”) 选择所有的为空(也不包括文本节点)的td元素的数组
$(“div:has§”) 选择所有含有p标签的div元素
$(“td:parent”) 选择所有的以td为父节点的元素数组

可视化过滤选择器:

$(“div:hidden”) 选择所有的被hidden的div元素
$(“div:visible”) 选择所有的可视化的div元素

属性过滤选择器:

$(“div[id]”) 选择所有含有id属性的div元素
$(“input[name=‘newsletter’]”) 选择所有的name属性等于’newsletter’的input元素
$(“input[name!=‘newsletter’]”) 选择所有的name属性不等于’newsletter’的input元素
$(“input[name^=‘news’]”) 选择所有的name属性以’news’开头的input元素
(“input[name(“input[name=‘news’]”) 选择所有的name属性以’news’结尾的input元素
$(“input[name*=‘man’]”) 选择所有的name属性包含’news’的input元素

(“input[id][name(“input[id][name=‘man’]”) 可以使用多个属性进行联合选择,该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器:

$(“div span:first-child”) 返回所有的div元素的第一个子节点的数组
$(“div span:last-child”) 返回所有的div元素的最后一个节点的数组
$(“div button:only-child”) 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器:

$(“:input”) 选择所有的表单输入元素,包括input, textarea, select 和 button
$(“:text”) 选择所有的text input元素
$(“:password”) 选择所有的password input元素
$(“:radio”) 选择所有的radio input元素
$(“:checkbox”) 选择所有的checkbox input元素
$(“:submit”) 选择所有的submit input元素
$(“:image”) 选择所有的image input元素
$(“:reset”) 选择所有的reset input元素
$(“:button”) 选择所有的button input元素
$(“:file”) 选择所有的file input元素
$(“:hidden”) 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器:

$(“:enabled”) 选择所有的可操作的表单元素
$(“:disabled”) 选择所有的不可操作的表单元素
$(“:checked”) 选择所有的被checked的表单元素
$(“select option:selected”) 选择所有的select 的子元素中被selected的元素

发表在 Jquery常用知识 | Jquery选择器已关闭评论

jQuery命名空间,原理解释

对jQuery命名空间,原理解释
Prototype:将某一系列的功能封装到一个类之中,eg:Math类。
jQuery:将HTML节点视为一个Object,通过调用这个Object的不同方法。

1.理解jQuery的两对小括号()()
运算符表达式,
函数本身自带,
调用函数() //注意引用函数
eg:
(function(){
alert(“aa”);
})();

function myfun(){
//
}
myfun();
强制运算(优先级)void , +

2.jQuery和prototype共存
脚本开始处调用方法:
方法一:jQuery.noConflict()方法
a.jQuery(document).ready(function(){});
b.$(function(){});

方法二:$j=jQuery.noConflict()
a.$j(document).ready(function(){});
b.$j(function(){});

方法三:
jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何
a.jQuery(function(){ //外部jQuery定义
//继续可以使用$作为别名
})

b.jQuery(document).ready(function(){
//
})
eg:

Java代码
1.jQuery.noConflict();
2.//jq
3.jQuery(function($){

  1. //$(“div”).hide();
    5.});
    6.//pro
    7.$(‘oDiv’).style.display=”none”
    jQuery.noConflict();
    //jq
    jQuery(function($){
    //$(“div”).hide();
    });
    //pro
    $(‘oDiv’).style.display=”none”

3.query自定义插件命名空间
(function($){
//代码
})(jQuery);

jQuery(function($){
//
});

function中的方法会在加载js文件时候就会
调用function($)中的$是形参
而(jQuery)是实参,jQuery是jquery.js中的全局变量,实际上就代表$.
所以说即使在外面声明了var $j = jQuery.noConflict();组件js里面的$也不会受到影响

发表在 Jquery常用知识 | jQuery命名空间,原理解释已关闭评论

Jquery技巧

前段时间发布了Jquery类库1.4版本,使用者也越来越多,为了方便大家对Jquery的使用,下面列出了一些Jquery使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突问题。

  具体如下:

  1. 禁止右键点击

  1. $(document).ready(function(){
  2. $(document).bind(“contextmenu”,function(e){
  3. return false;
  4. });
  5. });   2. 隐藏搜索文本框文字
  6. $(document).ready(function() {
  7. $(“input.text1”).val(“Enter your search text here”);
  8. textFill($(‘input.text1’));
  9. });
    5.
  10. function textFill(input){ //input focus text function
  11. var originalvalue = input.val();
  12. input.focus( function(){
  13. if( $.trim(input.val()) == originalvalue ){ input.val(”); }
  14. });
  15. input.blur( function(){
  16. if( $.trim(input.val()) == ” ){ input.val(originalvalue); }
  17. });
  18. }   3. 在新窗口中打开链接
  19. $(document).ready(function() {
  20. //Example 1: Every link will open in a new window
  21. $(‘a[href^=”http://”]’).attr(“target”, “_blank”);
    4.
  22. //Example 2: Links with the rel=”external” attribute will only open in a new window
  23. $(‘a[@rel$=’external’]’).click(function(){
  24. this.target = “_blank”;
  25. });
  26. });
  27. // how to use
  28. open link   4. 检测浏览器   注: 在版本jQuery 1.4中,$.support 替换掉了$.browser 变量。
  29. $(document).ready(function() {
  30. // Target Firefox 2 and above
  31. if ($.browser.mozilla && $.browser.version >= “1.8” ){
  32. // do something
  33. }
    6.
  34. // Target Safari
  35. if( $.browser.safari ){
  36. // do something
  37. }
    11.
  38. // Target Chrome
  39. if( $.browser.chrome){
  40. // do something
  41. }
    16.
  42. // Target Camino
  43. if( $.browser.camino){
  44. // do something
  45. }
    21.
  46. // Target Opera
  47. if( $.browser.opera){
  48. // do something
  49. }
    26.
  50. // Target IE6 and below
  51. if ($.browser.msie && $.browser.version <= 6 ){
  52. // do something
  53. }
    31.
  54. // Target anything above IE6
  55. if ($.browser.msie && $.browser.version > 6){
  56. // do something
  57. }
  58. });
  59. 预加载图片
  60. $(document).ready(function() {
  61. jQuery.preloadImages = function()
  62. {
  63. for(var i = 0; i”).attr(“src”, arguments[i]);
  64. }
  65. };
  66. // how to use
  67. $.preloadImages(“image1.jpg”);
  68. });   6. 页面样式切换
  69. $(document).ready(function() {
  70. $(“a.Styleswitcher”).click(function() {
  71. //swicth the LINK REL attribute with the value in A REL attribute
  72. $(‘link[rel=stylesheet]’).attr(‘href’ , $(this).attr(‘rel’));
  73. });
  74. // how to use
  75. // place this in your header
  76. // the links
  77. Default Theme
  78. Red Theme
  79. Blue Theme
  80. });   7. 列高度相同   如果使用了两个CSS列,使用此种方式可以是两列的高度相同。
  81. $(document).ready(function() {
  82. function equalHeight(group) {
  83. tallest = 0;
  84. group.each(function() {
  85. thisHeight = $(this).height();
  86. if(thisHeight > tallest) {
  87. tallest = thisHeight;
  88. }
  89. });
  90. group.height(tallest);
  91. }
  92. // how to use
  93. $(document).ready(function() {
  94. equalHeight($(“.left”));
  95. equalHeight($(“.right”));
  96. });
  97. });   8. 动态控制页面字体大小   用户可以改变页面字体大小
  98. $(document).ready(function() {
  99. // Reset the font size(back to default)
  100. var originalFontSize = $(‘html’).css(‘font-size’);
  101. $(“.resetFont”).click(function(){
  102. $(‘html’).css(‘font-size’, originalFontSize);
  103. });
  104. // Increase the font size(bigger font0
  105. $(“.increaseFont”).click(function(){
  106. var currentFontSize = $(‘html’).css(‘font-size’);
  107. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  108. var newFontSize = currentFontSizeNum*1.2;
  109. $(‘html’).css(‘font-size’, newFontSize);
  110. return false;
  111. });
  112. // Decrease the font size(smaller font)
  113. $(“.decreaseFont”).click(function(){
  114. var currentFontSize = $(‘html’).css(‘font-size’);
  115. var currentFontSizeNum = parseFloat(currentFontSize, 10);
  116. var newFontSize = currentFontSizeNum*0.8;
  117. $(‘html’).css(‘font-size’, newFontSize);
  118. return false;
  119. });
  120. });
  121. 返回页面顶部功能
  122. $(document).ready(function() {
  123. $(‘a[href*=#]’).click(function() {
  124. if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
  125. && location.hostname == this.hostname) {
  126. var $target = $(this.hash);
  127. $target = $target.length && $target
  128. || $(‘[name=’ + this.hash.slice(1) +’]’);
  129. if ($target.length) {
  130. var targetOffset = $target.offset().top;
  131. $(‘html,body’)
  132. .animate({scrollTop: targetOffset}, 900);
  133. return false;
  134. }
  135. }
  136. });
  137. // how to use
  138. // place this where you want to scroll to
  139. // the link
  140. go to top
  141. });   10.获得鼠标指针XY值
  142. $(document).ready(function() {
  143. $().mousemove(function(e){
  144. //display the x and y axis values inside the div with the id XY
  145. $(‘#XY’).html(“X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
  146. });
  147. // how to use
  148. 8.
  149. });   11. 验证元素是否为空
  150. $(document).ready(function() {
  151. if ($(‘#id’).html()) {
  152. // do something
  153. }
  154. });   12. 替换元素
  155. $(document).ready(function() {
  156. $(‘#id’).replaceWith(‘
  157. I have been replaced 4.
  158. ‘);
  159. });   13. jQuery延时加载功能
  160. $(document).ready(function() {
  161. window.setTimeout(function() {
  162. // do something
  163. }, 1000);
  164. });   14. 移除单词功能
  165. $(document).ready(function() {
  166. var el = $(‘#id’);
  167. el.html(el.html().replace(/word/ig, “”));
  168. });
  169. 验证元素是否存在于Jquery对象集合中
  170. $(document).ready(function() {
  171. if ($(‘#id’).length) {
  172. // do something
  173. }
  174. });   17. 使整个DIV可点击
  175. $(document).ready(function() {
  176. $(“div”).click(function(){
  177. //get the url from href attribute and launch the url
  178. window.location=$(this).find(“a”).attr(“href”); return false;
  179. });
  180. // how to use
  181. home 8.
  182. });   18.ID与Class之间转换当改变Window大小时,在ID与Class之间切换
  183. $(document).ready(function() {
  184. function checkWindowSize() {
  185. if ( $(window).width() > 1200 ) {
  186. $(‘body’).addClass(‘large’);
  187. }
  188. else {
  189. $(‘body’).removeClass(‘large’);
  190. }
  191. }
  192. $(window).resize(checkWindowSize);
  193. });   19. 克隆对象
  194. $(document).ready(function() {
  195. var cloned = $(‘#id’).clone();
  196. // how to use
  197. 5.
  198. });   20. 使元素居屏幕中间位置
  199. $(document).ready(function() {
  200. jQuery.fn.center = function () {
  201. this.css(“position”,”absolute”);
  202. this.css(“top”, ( $(window).height() – this.height() ) / 2+$(window).scrollTop() + “px”);
  203. this.css(“left”, ( $(window).width() – this.width() ) / 2+$(window).scrollLeft() + “px”);
  204. return this;
  205. }
  206. $(“#id”).center();
  207. });
  208. 写自己的选择器
  209. $(document).ready(function() {
  210. $.extend($.expr[‘:’], {
  211. moreThen1000px: function(a) {
  212. return $(a).width() > 1000;
  213. }
  214. });
  215. $(‘.box:moreThen1000px’).click(function() {
  216. // creating a simple js alert box
  217. alert(‘The element that you have clicked is over 1000 pixels wide’);
  218. });
  219. });   22. 统计元素个数
  220. $(document).ready(function() {
  221. $(“p”).size();
  222. });   23. 使用自己的 Bullets
  223. $(document).ready(function() {
  224. $(“ul”).addClass(“Replaced”);
  225. $(“ul > li”).prepend(“? “);
  226. // how to use
  227. ul.Replaced { list-style : none; }
  228. });   24. 引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.
  229. //Example 1

  230. 9.
  231. // Example 2:(the best and fastest way)
  232.   25. 禁用Jquery(动画)效果
  233. $(document).ready(function() {
  234. jQuery.fx.off = true;
  235. });   26. 与其他Javascript类库冲突解决方案
  236. $(document).ready(function() {
  237. var $jq = jQuery.noConflict();
  238. $jq(‘#id’).show();
  239. });
发表在 Jquery常用知识 | Jquery技巧已关闭评论

分享一套cookies方法

var Cookies = {};
/*写cookies */
Cookies.set = function(name, value){
     var argv = arguments;
     var argc = arguments.length;
     var expires = (argc > 2) ? argv[2] : null;
     var path = (argc > 3) ? argv[3] : '/';
     var domain = (argc > 4) ? argv[4] : null;
     var secure = (argc > 5) ? argv[5] : false;
     document.cookie = name + "=" + escape (value) +
       ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
       ((path == null) ? "" : ("; path=" + path)) +
       ((domain == null) ? "" : ("; domain=" + domain)) +
       ((secure == true) ? "; secure" : "");
};
/* 读取Cookies */
Cookies.get = function(name){
    var arg = name + "=";
    var alen = arg.length;
    var clen = document.cookie.length;
    var i = 0;
    var j = 0;
    while(i < clen){
        j = i + alen;
        if (document.cookie.substring(i, j) == arg)
            return Cookies.getCookieVal(j);
        i = document.cookie.indexOf(" ", i) + 1;
        if(i == 0)
            break;
    }
    return null;
};
/*清除Cookies */
Cookies.clear = function(name) {
  if(Cookies.get(name)){
    var expdate = new Date(); 
    expdate.setTime(expdate.getTime() - (86400 * 1000 * 1)); 
    Cookies.set(name, "", expdate); 
  }
};

Cookies.getCookieVal = function(offset){
   var endstr = document.cookie.indexOf(";", offset);
   if(endstr == -1){
       endstr = document.cookie.length;
   }
   return unescape(document.cookie.substring(offset, endstr));
};


var exp_time = new Date(); 
exp_time.setTime(exp_time.getTime() + 1*60*60*1000);	
Cookies.set("yxcookie",cookiesValnew,exp_time,'/','yxlady.com');

var cookiesValnew = "ad_liandong_hdt";
cookiesValold = Cookies.get("yxcookie");

if(cookiesValold == "ad_liandong_hdt"){

}
发表在 Javascript常用知识 | 分享一套cookies方法已关闭评论

utf-8编码引起js输出中文乱码的解决办法

如果web application的编码规则是utf-8,如网页头中的:

那么js文件中如果有中文输出就会出现乱码,解决此个问题可在引用javascript输出的地方加上charset=”gb2312″ 或 charset=”big5″(假设输出的是Big5繁体字)。

例:

PS:另一种解决方法是把js文件保存为utf-8编码。
如果web application的编码规则是utf-8,如网页头中的:

那么js文件中如果有中文输出就会出现乱码,解决此个问题可在引用javascript输出的地方加上charset=”gb2312″ 或 charset=”big5″(假设输出的是Big5繁体字)。

例:

PS:另一种解决方法是把js文件保存为utf-8编码。

发表在 Javascript常用知识 | utf-8编码引起js输出中文乱码的解决办法已关闭评论

js过滤HTML标签以及 

今天要做一个应用–判断编辑器中文字的个数。如果少如20个字就不能让其提交。没多想,正好周末的时候看了一下js中正则表达式的内容。很容易就想到了要用正则表达式来解决这个问题。虽说看了正则表达式的内容是看了,但是毕竟还是刚接接触,连基本的概念都很模糊,于是只好在网上找到如下的代码:

function setContent(str) {
str = str.replace(/<\/?[^>]>/g,”); //去除HTML tag str.value = str.replace(/[ | ]\n/g,’\n’); //去除行尾空白
//str = str.replace(/\n[\s| | ]*\r/g,’\n’); //去除多余空行
return str;
}

测试的时候发现这段代码不能过滤掉网页中空格字符(即: )。于是自己又改造了一下:

function removeHTMLTag(str) {
str = str.replace(/<\/?[^>]>/g,”); //去除HTML tag str = str.replace(/[ | ]\n/g,’\n’); //去除行尾空白
//str = str.replace(/\n[\s| | ]*\r/g,’\n’); //去除多余空行
str=str.replace(/ /ig,”);//去掉 
return str;
}

恩,我的要求达到了。

现在来稍稍解释一下所用到的三个正则表达吧(需要说明的是,因为自己也是刚刚接触,也许我的解释并不是正确的,仅供参考):

第一个:/<\/?[^>]*>/g

在js中正则表达式是以“/”开头的,后面的/g,含义是表示全局模式,意思是在将匹配的模式应用于整个字符串,而不是在第一次匹配上之后就停止匹配了。

<\/?[^>]*> 这个分开来解释,其中第二个字符“\”是一个转移字符,用来转移后面的”/”字符的。?匹配0或1个正好在它之前的那个字符。注意:这个元字符不是所有的软件都支持的。所以<\/?就是匹配html标签中的”</”格式或者“<”格式的。

再来说[^>]*>。[]是含义是:

^的含义是:匹配一行的开始。例如正则表达式^When in能够匹配字符串”When in the course of human events”的开始,但是不能匹配”What and When in the”。意思就是匹配以“When in”开头的文字。

的含义是:匹配0或多个正好在它之前的那个字符。例如正则表达式。意味着能够匹配任意数量的任何字符

因此[^>]*意思是匹配>之外的字符。所以[^>]可以匹配出的模式可以像下面这样的:
1.div
2.我需要的文字</div
3.p
4.我需要的文字</p

*和前面的[^>]结合在一起就可以匹配下面这些字符了:
1.div>我需要的文字我需要的文字</p
3.br /

再加上后面的>就可以匹配下面的字符了:
1.div>我需要的文字
2.p>我需要的文字
3.br />

这样就完成了一对HTML标签的匹配了。(多句话,总觉得这个匹配有点啰嗦,但是不知道到底在哪个地方啰嗦)

第二个:/[ | ]*\n/g:我也没有看懂

第三个:/ /ig:就是直接查找 字符,后面的/ig的含义是在全局模式下进行不区分大小写的查找。g代表全局,i表示不区分大小写。

发表在 Javascript常用知识 | js过滤HTML标签以及 已关闭评论

判断浏览器类型

<script language="JavaScript"> 
    <!-- 
function getOs() 
{ 
    var OsObject = ""; 
   if(navigator.userAgent.indexOf("MSIE")>0) { 
        return "MSIE"; 
   } 
   if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ 
        return "Firefox"; 
   } 
   if(isSafari=navigator.userAgent.indexOf("Safari")>0) { 
        return "Safari"; 
   }  
   if(isCamino=navigator.userAgent.indexOf("Camino")>0){ 
        return "Camino"; 
   } 
   if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ 
        return "Gecko"; 
   } 
   
} 
 alert("您的浏览器类型为:"+getOs()); 
    --> 
</script> 

发表在 Javascript常用知识 | 判断浏览器类型已关闭评论

通过javascript获得url参数

function GetUrlParms()
{
var args=new Object();
var query=location.search.substring(1);//获取查询串
var pairs=query.split(“&”);//在逗号处断开
for(var i=0;i<pairs.length;i++)
{
var pos=pairs[i].indexOf(‘=’);//查找name=value
if(pos==-1) continue;//如果没有找到就跳过
var argname=pairs[i].substring(0,pos);//提取name
var value=pairs[i].substring(pos+1);//提取value
args[argname]=unescape(value);//存为属性
}
return args;
}

//使用方法:
var args = new Object();
args = GetUrlParms();
//如果要查找参数key:
value = args[key]

发表在 Javascript常用知识 | 通过javascript获得url参数已关闭评论