JQuery笔记

Hooopo

浏览: 335235 次
性别:
来自: 北京

最近访客更多访客>>

shenqiax

u012363178

yuan

southwolf

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jQuery json Rails 正则表达式 Ruby

天才第一步：

1. 下载jQuery.js并保存在网页可以存取的位置。下载链接：http://docs.jquery.com/Downloading_jQuery
2. 在HTML的head里引用jQuery.js
3. 运用jQuery的方法

 {:a => 1, :b => 3}
 merged_obj = obj.merge(:c => 4, :a => 5) #=> {:a=>5, :b=>3, :c=>4}

js merge Object:

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

分享到：

HTTP request 相关 | 可定制的Rails错误回显

2009-09-20 15:59
浏览 5610
评论(48)
分类:Web前端
查看更多

48 楼 Hooopo 2011-05-12

stopPropagation() 方法

不再派发事件。
终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

47 楼 Hooopo 2011-05-10

$.fn.extend({

        //获取和设置光标位置

        position:function( value ){
                var elem = this[0];
                if (elem&&(elem.tagName=="TEXTAREA"||elem.type.toLowerCase()=="text")) {
                        if($.browser.msie){
                                var rng;
                                if(elem.tagName == "TEXTAREA"){
                                        rng = elem.createTextRange();
                                }else{
                                        rng = document.selection.createRange();
                                }
                                if( value === undefined ){
                                        rng.moveStart("character",-elem.value.length);
                                        return  rng.text.length;
                                }else if(typeof value === "number" ){
                                        var index=this.position();
                                        rng.moveStart("character",value)
                                        rng.moveEnd("character",value-index+1)
                                        rng.select();
                                }
                        }else{
                                if( value === undefined ){
                                        return elem.selectionStart;
                                }else if(typeof value === "number" ){
                                        elem.selectionEnd = value;
                                        elem.selectionStart = value;
                                }
                        }
                }else{
                        if( value === undefined )
                                return undefined;
                }
        },

        //选择区域

        selectRange:function(start, end){
                return this.each(function(){
                        if (this.setSelectionRange) {
                                this.focus();
                                this.setSelectionRange(start, end);
                        }
                        else
                        if (this.createTextRange) {
                                var range = this.createTextRange();
                                range.collapse(true);
                                range.moveEnd('character', end);
                                range.moveStart('character', start);
                                range.select();
                        }
                })
        },

        //初始化对象以支持光标处插入内容

        setCaret: function(){
                if(!$.browser.msie) return;
                var initSetCaret = function(){
                        var textObj = $(this).get(0);
                        textObj.caretPos = document.selection.createRange().duplicate();
                };
                $(this)
                .click(initSetCaret)
                .select(initSetCaret)
                .keyup(initSetCaret);
        },

        //在当前对象光标处插入指定的内容

        insertAtCaret: function(textFeildValue){
                var textObj = $(this).get(0);
                if(document.all && textObj.createTextRange && textObj.caretPos){
                        var caretPos=textObj.caretPos;
                        caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ?
                        textFeildValue+'' : textFeildValue;
                }
                else if(textObj.setSelectionRange){
                        var rangeStart=textObj.selectionStart;
                        var rangeEnd=textObj.selectionEnd;
                        var tempStr1=textObj.value.substring(0,rangeStart);
                        var tempStr2=textObj.value.substring(rangeEnd);
                        textObj.value=tempStr1+textFeildValue+tempStr2;
                        textObj.focus();
                        var len=textFeildValue.length;
                        textObj.setSelectionRange(rangeStart+len,rangeStart+len);
                        textObj.blur();
                }
                else {
                        textObj.value+=textFeildValue;
                }
        }
})

46 楼全冠清 2009-10-30

全冠清写道

Hooopo 写道

其实我也隐隐约约闻到一些bad small...

在找动态添加select option的方法
我写的，觉得有点搓，不知道有没有其他好的方式

$(document).ready(function (){
  $('#country').change(function (){
    var options = ""
    $.getJSON(
      "destination/api_load_cities",
      {
        country: this.value
      },
      function(json){  
        var size = json.length;
        for(var i = 0; i < size; i++){
          options += "<option value=" + json[i].destination.id + ">" + json[i].destination.name + "</option>"
        }
        $('#city').empty()
        $('#city').append(options)
      }
      )
  });
});

  var json=[{'text':"00000",'value':"00000"},{'text':"6666",'value':"6666"}]
$(json).each(function(i){
				$('#test').append($(new Option).text(this.text).val(this.value))
			})

var json=[{'text':"00000",'value':"00000"},{'text':"6666",'value':"6666"}]
for(i in json){
				$('#test').append($(new Option).text(json[i]['text']).val(json[i]['value']))
			}

45 楼 Hooopo 2009-10-21

重于暂时摆脱js了。。。

44 楼 Hooopo 2009-10-20

貌似我的冒泡没用对。。。。惭愧

43 楼 Hooopo 2009-10-19

全冠清写道

引用

我这样append的option，我如何去监视他的evet呢？貌似没有触发onchange

change是可以监听到的，因为后改变是是option,而change是绑定在select上的，见

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
	</head>
	<script type="text/javascript" language="JavaScript" src="jquery-1.3.1.min.js"></script>
	<script type="text/javascript" language="JavaScript">
		$(document).ready(function(){
			$('#test').change(function(){
				alert($(this).val())
			})
			$('<option value="1">111</option><option value="2">222</option>').appendTo('#test')
		})
	</script>
	<body>
		<select id='test'></select>
	</body>
</html>

还有就是关于新建元素的事件绑定问题，最easy的做法是利用事件冒泡，把事件绑定在将要填加元素的父元素上，再要根据这个事件的target来判断触发事件的元素是不是自己填加的那个。

今天重构代码时候试了下事件上移。。。但是没弄好\(^o^)/~..
又发现了$("#xx").live("click", function(){alert("oo");})
jquery 1.3新加的好像是。据说性能有点损失。

42 楼 Hooopo 2009-10-10

string to json and json stringfy
http://www.dreamdu.com/blog/2008/10/19/json_in_javascript/

41 楼 Hooopo 2009-10-01

Hooopo 写道

rails 里使用jQuery：
http://jimneath.org/2008/06/18/using-jquery-with-ruby-on-rails

Rails authenticity token with jQueryhttp://henrik.nyh.se/2008/05/rails-authenticity-token-with-jquery

40 楼 Hooopo 2009-09-30

对象的constructor属性
每一个javascript对象都有一个constructor属性.这个属性对应了对象初始化时的构造函数(函数也是对象).

var date = new Date();  
alert(date.constructor);  //Date  
alert(date.constructor == "Date");  //false  
alert(date.constructor == Date);  //true

39 楼 Hooopo 2009-09-30

rails 里使用jQuery：
http://jimneath.org/2008/06/18/using-jquery-with-ruby-on-rails

38 楼 Hooopo 2009-09-29

location.href//链接地址
location.port//端口
location.search//查询参数，形如?q=123
location.protocol//协议

37 楼 Hooopo 2009-09-29

alert(window.location);//返回当前url

36 楼 Hooopo 2009-09-29

alert(window.location.host);//返回主机+端口
alert(document.domain);//只返回域名

35 楼 Hooopo 2009-09-28


$.extend(deep, target, object1, objectN)

If no target is specified, the JQuery namespace itself is extended. This can be useful for plugin authors wishing to add new methods to JQuery.

If a boolean true is specified as the first argument, JQuery performs a deep copy, recursively copying any objects it finds. Otherwise, the copy will share structure with the original object(s).

Undefined properties are not copied. However, properties inherited from the object's prototype will be copied over.

Returns

Object

Parameters

deep (Boolean): If set, the merge becomes recursive (i.e. deep copy).
target (Object): The object to extend.
object1 (Object): The object that will be merged into the first.
objectN (Object): More objects to merge into the first.
Example

Merge settings and options, modifying settings.

jQuery Code

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

Example

Merge defaults and options, without modifying the defaults.

jQuery Code

var empty = {}
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = $.extend(empty, defaults, options);

34 楼全冠清 2009-09-24

Hooopo 写道

ok了......哇咔咔。

原本是我想下班后占32楼的，没想到没得逞。

33 楼全冠清 2009-09-24

引用

我这样append的option，我如何去监视他的evet呢？貌似没有触发onchange

change是可以监听到的，因为后改变是是option,而change是绑定在select上的，见

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
	</head>
	<script type="text/javascript" language="JavaScript" src="jquery-1.3.1.min.js"></script>
	<script type="text/javascript" language="JavaScript">
		$(document).ready(function(){
			$('#test').change(function(){
				alert($(this).val())
			})
			$('<option value="1">111</option><option value="2">222</option>').appendTo('#test')
		})
	</script>
	<body>
		<select id='test'></select>
	</body>
</html>

32 楼 Hooopo 2009-09-24

ok了......哇咔咔。

31 楼 Hooopo 2009-09-24

全冠清写道

Hooopo 写道

其实我也隐隐约约闻到一些bad small...

在找动态添加select option的方法
我写的，觉得有点搓，不知道有没有其他好的方式

$(document).ready(function (){
  $('#country').change(function (){
    var options = ""
    $.getJSON(
      "destination/api_load_cities",
      {
        country: this.value
      },
      function(json){  
        var size = json.length;
        for(var i = 0; i < size; i++){
          options += "<option value=" + json[i].destination.id + ">" + json[i].destination.name + "</option>"
        }
        $('#city').empty()
        $('#city').append(options)
      }
      )
  });
});

  var json=[{'text':"00000",'value':"00000"},{'text':"6666",'value':"6666"}]
$(json).each(function(i){
				$('#test').append($(new Option).text(this.text).val(this.value))
			})

还用each啊，我第一次用了个for in结果不行...后来换成这么笨的方法了。现在又遇到了个问题，我这样append的option，我如何去监视他的evet呢？貌似没有触发onchange，我想在country select后加载全部city，然后获取被选中的city的值。

30 楼全冠清 2009-09-24

Hooopo 写道

哈哈，，继续贴

引用

jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关
获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

获取值：

文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio：   $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
                 $("#txt").attr("value",'11');//填充内容

多选框checkbox： $("#chk1").attr("checked",'');//不打勾
                 $("#chk2").attr("checked",true);//打勾
                 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio：    $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select：   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
                $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
                $("#sel").empty()；//清空下拉框

这个很眼熟嘛。。

29 楼全冠清 2009-09-24

Hooopo 写道

其实我也隐隐约约闻到一些bad small...

在找动态添加select option的方法
我写的，觉得有点搓，不知道有没有其他好的方式

$(document).ready(function (){
  $('#country').change(function (){
    var options = ""
    $.getJSON(
      "destination/api_load_cities",
      {
        country: this.value
      },
      function(json){  
        var size = json.length;
        for(var i = 0; i < size; i++){
          options += "<option value=" + json[i].destination.id + ">" + json[i].destination.name + "</option>"
        }
        $('#city').empty()
        $('#city').append(options)
      }
      )
  });
});

  var json=[{'text':"00000",'value':"00000"},{'text':"6666",'value':"6666"}]
$(json).each(function(i){
				$('#test').append($(new Option).text(this.text).val(this.value))
			})

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery笔记

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JQuery笔记

评论

发表评论

相关推荐

模拟alert对话框，N秒不点击自动关闭（基于jQuery模式对话框）

最近访客更多访客>>