jquery+js+html常用方法总结

版权声明:本文为博主蓝天白云原创文章,转载请注明原地址.欢迎指正错误,谢谢! 本文地址: https://blog.csdn.net/lan861698789/article/details/7677079


1、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; 

2、如何获取jQuery集合的某一项

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

$("div").eq(2).html(); //调用jquery对象的方法 
$("div").get(2).innerHTML; //调用dom的方法属性 

3、如何级联两个下拉框

页面某个checkbox选中,那么对应的文本框要disabled,有很多这个情况。当初始化页面时候,不可能一个个去 disabled文本框。这个就要用each来循环。

在html tag中分别添加一个不同的标签,其值一样,然后点击了其中一个后,拿到该事件的那个标签值,用find方法找到与这个值相同的另一个html tag。

这里主要是用了effectDivValue和effectDivKey,值相同。

Feed.Utils.initOverride = function(namespace,className) {
			var _objects = $(className);
			_objects.each(function (index, domEle){
				var _object = $(domEle).find("input[effectDivKey]").attr("effectDivKey");
				if($(domEle).find("input[effectDivKey]").attr("checked")=="checked"){
					$("*[effectDivValue='"+_object+"']").attr("disabled",false);
				} else {
					$("*[effectDivValue='"+_object+"']").attr("disabled",true);
				}
			});
	};

<aui:select id="feedFormatId" name="feedFormatId" effectDivValue="feedFormatId" label="" >
   <aui:option>wo</aui:option>
   <aui:option>wo</aui:option>
</aui:select>
<aui:input effectDivKey="feedFormatId" id="feedFormatIdOverrideId" name="feedFormatIdOverride" type="checkbox" label="override" value="1" />


4、如何拿到事件句柄,特别实在liefray中

$("#"+namespace+selectId).bind('change',function(event) {
     var _selectValue = $(event.target)
};


 

5、jquery中 $.fn 和 $.fx是什么意思?

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc()
那么你可以这样子:$("#div").abc();
通常使用extend方法扩展.

$.fx是指jquery的特效。
如果使用显示、滑动、淡入淡出、动画等。

$.fx.off可以关闭动画,其实是直接显示结果。


6、jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object);

jQuery.extend(object);

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

 

fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

};

 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

 虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

 jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

 $.extend({

  add:function(a,b){return a+b;}

});

 便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,

$.add(3,4);  //return 7

 jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

Java代码 $.fn.extend({           alertWhileClick:function(){              $(this).click(function(){                   alert($(this).val());            });            }        });        $("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>   

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

 

 7、jquery中怎么获取click事件的对象

 

$('#btn').bind("click",function(){
    alert($(this).val()); //获取文本的值
    alert($(this)); 
 });

 8、Jquery中Ajax怎么获取整个form表单类容

 form.serializeToObject(), 

 

$(form).serializeObject()

$('#correctData').on('click',function(ev) {
            $.ajax({
                url : 'cashierCorrectDataAction/correct.json', 
                dataType : 'json', 
                type : 'post',
                data : form.serializeToObject(), 
                success : function(data) {
                    alert(data);
                }
            });            
        });

 

 

9、select,后台传递数据,然后该oprion被选

for(var i=0;i<_imageCopyrightSelect.length;i++){
	if( _imageCopyrightSelect.options[i].value == '<%=feed!=null?feed.getFeedCopyrightId():""%>'){
		_imageCopyrightSelect.options[i].selected = true;
	}
}

比如<select class="selector"></select>

1、设置value为pxx的项选中

     $(".selector").val("pxx");

2、设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    这里有一个中括号的用法,中括号里的等号的前面是属性名称,不用加引号。很多时候,中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

    $(".selector").val();

4、获取当前选中项的text

    $(".selector").find("option:selected").text();

    这里用到了冒号,掌握它的用法并举一反三也会让代码变得简洁。

 

很多时候用到select的级联,即第二个select的值随着第一个select选中的值变化。这在jQuery中是非常简单的。

如:$(".selector1").change(function(){

     // 先清空第二个

      $(".selector2").empty();

     // 实际的应用中,这里的option一般都是用循环生成多个了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});


10、一次性取得页面所有的需要提交的数据,放到一个数组,然后用json+ajax或者restful等技术传递到后台。


( function($){

EP.Portlets.UploadMedia = function(  ) {
	this.__init();
};
var proto = EP.Portlets.UploadMedia.prototype;

proto.__init = function( ) {
	this.mediaMaster = EP.Controllers.mediaVO.mediaVO;
	})(jQuery);
	
};

proto.read = function( config, uploadedColltn ) {
	var me = this;
		
		var myData = {}; //创建一个对象,或者:var myData = new Object();
		
		( function($){
			
			elLI.find('input[type!=radio]' ).each( function(){
				
				if ($(this).is(':checkbox'))
				{
					if ($(this).is(':checked')) {
						this.value = "true";
					} else {
						this.value = "false";
					}
				}
				if (this.value != 'undefined')
				myData[ this.name ] = this.value;
			});
			
			elLI.find('input[type=radio]:checked' ).each( function(){
				if (this.value != 'undefined')
				myData[ this.name ] = this.value;
				
				this.lastVal = this.value; //-- value as of last successful read
			});
			
			elLI.find('textarea' ).each( function(){
				if (this.value != 'undefined')
				myData[ this.name ] = this.value;
				
				this.lastVal = this.value; //-- value as of last successful read
			});

			elLI.find('select' ).each( function(){
				if (this.value != 'undefined' && !isNaN(this.value))
			    {
					myData[ this.id ] = this.value;
			    }
				
				this.lastVal = this.value; //-- value as of last successful read
			});

		})( jQuery );
		
		return myData;

};

proto.save = function( config ) {
	var me = this;

	var saveData = new Array();
	saveData.push( this.read( newConfig ) );

	AUI().use(
	'aui-io-request',
	function(A) {
		
		var url = '';
			url = '/story-wizard-portlet/restful/media/psave?userId='+userId+'&groupId='+groupId;
			A.io.request(url, {
				dataType : 'json',
				data : 'imagesData='+encodeURIComponent(JSON.stringify(saveData)),
				method : 'POST',
				on : {
					success : function() {						
						var respData = this.get('responseData').imageVOList;						
                        //获取数据然后处理
					}
				}
			});
	
	});
};

})( jQuery );

后台用restful接受

@RequestMapping(value = "/psave", method = RequestMethod.POST)
	public ComponentVO[] savePhoto(HttpServletRequest request, @RequestParam("imagesData") ImageVO[] imageVOs)
			throws Exception {
		MediaWorker mediaWorker = new MediaWorker();
		List<ComponentVO> processedPhotos = new ArrayList<ComponentVO>();
		for (ImageVO imgVo : imageVOs) {
			CommonCMSDataUtil.setCommonPortalProperties(request, imgVo);
			processedPhotos.add(mediaWorker.savePhoto(imgVo));
			CommonCMSUtil.processActivity(imgVo);
		}
		return processedPhotos.toArray(new ComponentVO[processedPhotos.size()]);
	}

注意:
var myData = {}; //创建一个对象,或者:var myData = new Object();
myData['userName'] = 'zhagnsan';
myData.password = 1234565;   //这是一样的;
alert(JSON.stringify(myData));
弹出:{"userName":"zhagnsan","password":1234565}

11、阻止button提交

<script>
function submit(){
      return false;
}
</script>
<form>
<input type="button" οnclick="submit()" />
</form>

















 

 

 


 




























展开阅读全文

没有更多推荐了,返回首页