jquery+js+html常用方法总结

最新推荐文章于 2024-07-03 21:14:45 发布

-兰天白云-

最新推荐文章于 2024-07-03 21:14:45 发布

阅读量1.2k

点赞数

分类专栏： JQuery 文章标签： jquery div

本文链接：https://blog.csdn.net/lan861698789/article/details/7677079

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

-兰天白云-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录