jQuery实战技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/jueqi2010/article/details/84709144

本文介绍了使用jQuery进行网页元素操作、表单处理及AJAX交互的方法。包括如何获取当前点击元素、设置单选按钮及下拉列表的默认选项、通过AJAX传递对象及处理返回结果、拼接HTML字符串等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、获取当前点击的元素

$('html').click(function(e){
		if(window.bzStatus){
			return;
		}
		var actInfoPop = $('#actInfoPop'),
		curObj = $(e.target);
		
		//时间插件
		if(curObj.closest("div[name='calendarForm']").length == 1) {
			return;
		}
		var status = (!curObj.closest('#actInfoPop').length && !curObj.closest('#partnerAdd').length && !curObj.closest('#sellAdd').length && !curObj.hasClass('act-name') && !curObj.closest('#alertPop').length && !curObj.hasClass('float-wrap').length && !curObj.closest('#distributePop').length);
		
		//....
	});

2、单选按钮及下拉列表选中

		createPop.find($("select[name='pointnum'] option[value='1']")).attr("selected",true);//默认选中 1位
		createPop.find('input:radio[name="ismoney"][value="0"]').attr('checked', true);//默认选中 非货币

3、ajax传递对象

var extrfield = {};
		extrfield.id = id;
		extrfield.extraid = extraid;
		extrfield.fieldname = fieldname;
		
		$.ajax({
				type: 'POST',
				url: '#RPL:pjPath#/system/extrfieldsave',
				dataType :'json',
				data : extrfield,
				async:false,
				success : function(data){
					if('0' == data) {
						$('#createpop').find('.big-gray-btn').click();
						alertPop('操作失败');
					} else {
						$('#createpop').find('.big-gray-btn').click();
						
						//重新加载字段
						var table = $("#infopop").find('tbody'); 
						table.html('');
						
						var ajaxData = {};
						ajaxData.extraid = extraid;
						$.ajax({
							type :'post',
							url : '#RPL:pjPath#/system/extrfieldmanagebyextraid',
							dataType :'json',
							data : ajaxData,
							async:false,
							success : function(data){
								var data = eval("("+data+")");
								var extrfields = data.extrfields;
								
								if(extrfields) {
									for (var i = 0; i < extrfields.length; i++) {
										
									}
								} 
							}
						});
						
						alertPop('操作成功');
					}
				},error: function(){
					alertPop('操作失败');
					return false;
				}
			});

另外一种情况

		var ajaxData = {};
			ajaxData["searchconditionDto[" + i + "].fieldname"] = 'xxx';
			ajaxData["searchconditionDto[" + i + "].operator"] = 'yyy';

4、js拼接html字符串

/*var str = '<tr>\
			<td><input type="text" value="'+value+'" data-value="" readonly/></td>\
			<td>\
				<select>\
					<option value="0">非默认值</option>\
					<option value="1" '+seled+'>默认值</option>\
				</select>\
			</td>\
			<td>\
				<span class="e-icon mr10"></span>\
				<span class="ddel-icon"></span>\
			</td>\
		</tr>';*/

5、jQuery 几个关键字

$('#workTab').delegate('.refuse-btn','click',function(){

		var msgPop = $('#msgPop');
		trObj= $(this).closest('tr'),
		formName = trObj.find('td').eq(1).text(),
		formId = trObj.data('id');

		$('#auditingForm').find('input[name="id"]').val(formId);//id
		
});

前端js