`
Hooopo
  • 浏览: 329627 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery笔记

jQueryjsonRails正则表达式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);
分享到：
| 可定制的Rails错误回显
评论
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>


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

    JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记JQuery笔记

    jquery笔记

    jquery笔记，多年前端开发积累。

    jQuery笔记

    学习jQuery解决选择器和事件方法 jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库。 1.2.jQuery的优势  可以简化JavaScript代码  可以像css那样获取元素  可以修改css来控制页面效果  ...

    jquery笔记详细

    jquery笔记详细

    jquery笔记总结

    完整Jquery笔记总结，xmind思维导图文档，可以下载查看。

    我的JQuery笔记.doc

    这是我在学习javaScript后才学习jQuery，JavaScript和jQuery是想关联的，最好按照这样的顺序学习，这是在学习过程中全部的jQuery笔记总结，现在的我学了一年了，jQuery大概学了一个多月，做的全部笔记，希望对大家...

    jquery 笔记

    jquery 选择器 jquery 是一个快速简单的javascript library 简化了html文件 ，动画，ajax 。方便了网页技术的快速发展

    JQuery笔记(表单验证).

    JQuery笔记(表单验证),

    jquery笔记.rar

    jquery笔记.rar

    JS-Ajax-jQuery笔记1

    JS-Ajax-jQuery笔记，学习笔记，JavaScript，JS-Ajax-jQuery笔记，学习笔记，JavaScript，

    韩顺平AJAX和jquery笔记整理

    韩顺平AJAX和jquery笔记整理，对于学习jquery和AJAX有很大的帮助。

    ajax \ git \ jquery笔记

    ajax\git\jquery笔记

    jQuery笔记（上）

    jQuery笔记（上） 入门学习笔记，仅供参考

    javascript和jquery笔记

    网络上看到的，挺好的，分享给大家， 达内的笔记 主要是javascript和jquery笔记

Magicbox
Global site tag (gtag.js) - Google Analytics