Jquery_1.7_01

最新推荐文章于 2025-01-05 09:52:15 发布

原创最新推荐文章于 2025-01-05 09:52:15 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了JavaScript中操作DOM的基本方法，并结合jQuery库展示了更高效、简洁的DOM操作方式，包括事件处理、样式修改、元素添加与移除、选项选择等高级应用。

$(function() {
		var usernameValue = $('#username').val();
		//alert(usernameValue);
	});
	/**************************/
	$(document).ready(function() {
		$('#btn01').click(function() {
			$("p").css("background-color", "red");
			$("p").hide();
			alert($(this).attr('name'));
		});
		//---给li加上不同的class
		$('ul li:last').addClass(function() {
			return 'item-' + $(this).index();
		});
		//---
		$('.mainTable .mainTr').click(function() {
			alert($(this).attr('id'));
		});
		//---
		$("span").after("<b>关不上的窗</b>");
		//---
		$(".mainTableList tr").hover(function() {
			$(this).addClass("hover");
		}, function() {
			$(this).removeClass("hover");
		});
		//--为每个匹配元素的特定事件绑定事件处理函数
		function handler(event) {
			alert(event.data.foo);
		}
		$('#p01').bind("click", {
			foo : "bar"
		}, handler);
		//---该方法就是将src合并到jquery的全局对象中去，如:就是将hello方法合并到jquery的全局对象中。
		$.extend({
			hello : function() {
				alert("hello");
			}
		});
		//---
		$("body").append("<table><tr><td>Toeoe</td></tr></table>");
		//---从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
		$("div").find("span").text();
		//---
		$('button').click(function() {
			$('div').each(function(index, domEle) {
				//domEle==this
				$(domEle).css("backgroundColor", "yellow");
				if ($(this).is("#stop")) {
					$("span").text("Stopped  at dic index#" + index);
					return false;
				}
			});
		});
		var arr = [ "aaa", "bbb", "ccc" ];
		$.each(arr, function(i, val) {
			//alert(i+":"+val);
		});
		//alert(4948/1024);
		//--改变样式
		$('#hero').css('color', 'red');
		$('#hero').css('display', 'none');
        //$("fieldset").css({margin:'20px',padding:'15px',border:'2px solid #1F408B',background:'#B6C2D1'});
        //$("legend").css('font-weight','bold');
        $('#hide').click(function(){
        	$('#hide').css('display','none');
        });
});

1. $("#select_id").change(function(){//code...});     //为Select添加事件，当选择其中一项时触发

 2. var checkText=$("#select_id").find("option:selected").text();    //获取Select选择的Text
 3. var checkValue=$("#select_id").val();    //获取Select选择的Value
 4. var checkIndex=$("#select_id ").get(0).selectedIndex;    //获取Select选择的索引值
 5. var maxIndex=$("#select_id option:last").attr("index");    //获取Select最大的索引值
 jQuery添加/删除Select的Option项：
 1. $("#select_id").append("<option value='Value'>Text</option>");    //为Select追加一个Option(下拉项)
 2. $("#select_id").prepend("<option value='0'>请选择</option>");    //为Select插入一个Option(第一个位置)
 3. $("#select_id option:last").remove();    //删除Select中索引值最大Option(最后一个)
 4. $("#select_id option[index='0']").remove();    //删除Select中索引值为0的Option(第一个)
 5. $("#select_id option[value='3']").remove();    //删除Select中Value='3'的Option
 5. $("#select_id option[text='4']").remove();    //删除Select中Text='4'的Option
 内容清空：
 $("#charCity").empty();