`
summer_021
  • 浏览: 56182 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
lengzl
社区版块
存档分类
最新评论

jQuery_基础2

 
阅读更多 
 if(document.getElementById("hello"))
 {
	document.getElementById("hello").style.color = "red";//如果没上面的if判断 ,没对应的id  会报错,get不到dom对象
 }

  <script type="text/javascript">
  	  alert("test!!");
	  alert($("#hello").css("color","red"));//读一个参数  写两个参数,方法名同一个(jquery调用css方法 通常做法)
	  alert($("#hello").css("color"));
	  alert($("#hello")[0].innerHTML);//转成dom对象
	  alert($("#hello").get(0));//转成dom对象
	  //当没有id时,获取不到,但还是一个对象,dom会报错.jquery不会报错,一个空的对象. length:获取到dom对象的个数,每个jquery对象都有的属性
  </script>

<script type="text/javascript">
/*
  window.onload = function()
  {
	var myTable = document.getElementById("table1");//逐层遍历
    var myTBody = myTable.getElementsByTagName("tbody")[0];
    var myTrs = myTBody.getElementsByTagName("tr");

	for(var i = 0; i < myTrs.length; i++)
	{
		if(i % 2 == 0)
		{
			myTrs[i].style.backgroundColor = "red";//css中:style="background-color"  JS中要去掉横线,横线后的首字母变大写
		}
		else
		{
			myTrs[i].style.backgroundColor = "blue";
		}
	}  
  }
*/
//两种方法  上面的原生JS方法,下面的jquery方法
  $(function()
  {
	$("#table1>tbody tr:even").css('background', 'red');
	$("#table1>tbody tr:odd").css('background', 'blue');
  });

  </script>
 <body>
<table id="table1" border="1" align="center" width="80%">
<tbody><!-- tbody:表示表格的实际内容 -->
  <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>
  <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>
  <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>
  <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>
  <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>
  <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>
  <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>
  <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>
  <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr>
</tbody>
</table>
 </body>

<script type="text/javascript" src="jquery-1.4.4.js"></script>
  <script type="text/javascript">
/*  
  window.onload = function()
  {
	var btn = document.getElementById("myButton");
	
	btn.onclick = function()
	{
		var count = 0;

		var checkboxs = document.getElementsByName("myCheck");

		for(var i = 0; i < checkboxs.length; i++)
		{
			if(checkboxs[i].checked)
			{
				count++;
			}
		}

		alert("number: " + count);
	}
  }
*/

$(function()
{
	$("#myButton").click(function()
	{
		alert("选中个数： " + $('input[name="myCheck"]:checked').length);
	});
});

</script>



 </head>

 <body>
  
 <input type="checkbox" name="myCheck" checked="checked">
 <input type="checkbox" name="myCheck">
 <input type="checkbox" name="myCheck" checked="checked">
 <input type="checkbox" name="myCheck">
 <input type="checkbox" name="myCheck">
 <br><br>
 <input type="button" value="click me" id="myButton">


 </body>

 <head>
  <meta name="Description" content="">
  <script type="text/javascript" src="jquery-1.4.4.js"></script>
	<script type="text/javascript">
    $(document).ready(function()
	{
		alert($("a").length);//如果获取的是根据id来的 length就为1,如果根据标签来的有几个就显示几个
		alert($("#test1").html());
		alert($("#test1").text());
		alert($("#test1").length);
		alert($("#test1").val);
		
		alert($(".test2").length);//根据class来 有几个就显示几个
	});
	</script>
 </head>
 <body>
<a class="test2" id="test1" href="http://www.google.com"><b><B>google</B></b></a>
<a class="test2" id="test1" href="http://www.yahoo.com">yahoo</a>
 </body>

 $(document).ready(function()
  {
	 //button1的按钮 点击 响应click(JS中叫onclick)
	$("#button1").click(function()
	{	//id为one的标签 背景颜色改为红色
		$("#one").css("background", "red");
	});

    $("#button2").click(function()
	{
    	//根据class找.底层隐藏了循环
		$(".mini").css("background", "green");
	});

    $("#button3").click(function()
	{
    	//根据div查找
		$("div").css("background", "orange");
	});

	$("#button4").click(function()
	{
		//所有的
		$("*").css("background", "blue");
	});

	$("#button5").click(function()
	{
		$("span, #two, .mini").css("background", "pink");
	});


  });

 $(document).ready(function()
  {
	$("#button1").click(function()
	{
		//body 下面的所有div(子元素,孙子元素,所有后代),$('body div'):单引双引都可以
		$('body div').css("background", "red");
	});

	$("#button2").click(function()
	{
		//body下的div子元素,仅限子元素.孙子元素不算
		$('body>div').css("background", "blue");
	});

	$("#button3").click(function()
	{
		//class为one的下一个div元素(可能有很多个下一个,下一个class也为one的情况下)
		//下面两种写法等价
		//$('.one + div').css("background", "green");
		$('.one').next('div').css("background", "green");
	});

	$("#button4").click(function()
	{
		//id为two后的所有兄弟元素,下面两种写法等价
		//$("#two ~ div").css("background", "orange");
		//$('#two').nextAll('div').css("background", "orange");
		
		
		//id为two的所有兄弟元素. 与前后顺序无关.
		$('#two').siblings('div').css("background", "orange");
	});
  });

//$(document)  可以写成 $()  默认是document
  $(document).ready(function()
  {
	$("#button1").click(function()
	{	
		//选择第一个div
		$("div:first").css("background", "red");
	});

	$("#button2").click(function()
	{
		//最后一个div
		$("div:last").css("background", "blue");
	});

	$("#button3").click(function()
	{
		//索引为偶数的div.隐藏的也参与
		$("div:even").css("background", "green");
	});

	$("#button4").click(function()
	{
		//索引位置为奇数的div
		$("div:odd").css("background", "orange");
	});
	
	$("#button5").click(function()
	{
		//索引为3的元素
		$("div:eq(3)").css('background', "pink");
	});

	$("#button6").click(function()
	{
		//class不为one的div
		$("div:not(.one)").css('background', "yellow");
	});
    
	$("#button7").click(function()
	{
		//索引大于3的div
		$("div:gt(3)").css('background', "#abcdef");
	})

	$("#button8").click(function()
	{
		//索引小于3的素有元素
		$("div:lt(3)").css('background', "#fedcba");
	})

	$("#button9").click(function()
	{
		//选取标题元素:h1-h6  6个
		$(":header").css('background', "#cdefab");
	})
	

  });

$(function()
  {
	$("#button1").click(function()
	{
		//外面双引号则里面单引号  或者 相反
		//文案包含:test222
		$("div:contains('test222')").css("background", "red");
	});

    $("#button2").click(function()
	{
    	//不包含文本内容,不包含空,或者不包含子元素的div
		$("div:empty").css("background", "green");
	});

	$("#button3").click(function()
	{
		//class为mini
		$("div:has(.mini)").css("background", "blue");
	});

	$("#button4").click(function()
	{
		//和empty对立
		$("div:parent").css("background", "#abaaee");
	});

  });

 <script type="text/javascript">

   $().ready(function()
   {
		$("#button1").click(function()
		{
			alert($('div:hidden').length);
			alert($('input:hidden').length);

			//方法链. 把不可见的div变为可见
			//show();里面的参数:时间,整个显示动作的时间
			$('div:hidden').show(1000).css("background", "blue");
		});

		$("#button2").click(function()
		{
			//可见的div
			$('div:visible').css("background", "green");
		});
   });


 $(function()
  {
	$("#button1").click(function()
	{
		//含有title属性的div
		$('div[title]').css("background", "green");
	});

    $("#button2").click(function()
	{
    	//含有title=test属性的div
		$("div[title=test]").css("background","red");
	});

	$("#button3").click(function()
	{
		//title不等于test的div,包含不含title属性的div
		$("div[title!=test]").css("background","pink");
	});

	$("#button4").click(function()
	{
		//含有 tilte=以test开头的div
		$("div[title^=test]").css("background","pink");
	});

	$("#button5").click(function()
	{
		//含有title=以st结尾的div
		$("div[title$=st]").css("background","pink");
	});

	$("#button6").click(function()
	{
		//含有title=*st*的div
		$("div[title*=st]").css("background","pink");
	});

	$("#button7").click(function()
	{
		//含有属性id ,tilte,并且title的属性值以t开头,并且以t结尾的div
		$("div[id][title^=t][title$=t]").css("background","pink");
	});

  });

$(function()
{
	$("#button1").click(function()
	{
		//class为one的div 下面的 第二个子元素
		//nth:表示第几个. 英文中以th结束
		$('div.one :nth-child(2)').css("background", "red");
	});

	$('#button2').click(function()
	{
		//每个父元素下的第一个子元素
		$('div.one :first-child').css('background', 'green');
	});
	
	$('#button3').click(function()
	{
		//class为one的div的最后一个子元素
		$('div.one :last-child').css('background', 'pink');
	});

	$('#button4').click(function()
	{
		//如果class为one的div下就一个子元素则选中此子元素
		$('div.one :only-child').css('background', 'orange');
	});

});


 $(function()
  {
	$("#button1").click(function()
	{
		//id为form1 下的input孙子  css不为test  并且可用
		$("#form1 input:not(.test):enabled").val("hello world");
	});

	$("#button2").click(function()
	{
		//id为form1 下的input孙子  css不为test  并且不可用
		$("#form1 input:not(.test):disabled").val("welcome");
	});

	//表单选择器.多选框
	$(":checkbox").click(function()
	{
		//html方法相当于 dom的innerHTML.
		$("div").html('<font color="blue"><b>' + $('input:checked').length +'</b></font>');
	});

	//change:改变选项的时候
	$('select:first').change(function()
	{
		var str = '';

		//each:遍历被选中的元素
		$('select:first :selected').each(function()
		{
			//$(this):将dom的this变成jquery的this
			str += $(this).text() + ",";
		});

		$('div:last').html('<b>' + str + '</b>');
	});
  });

$(function()
{
	alert($('#form1 :text').length);//type="text"的
    alert($('#form1 :password').length);//type="password"的
    alert($('#form1 :radio').length);//单选按钮
	alert($('#form1 :checkbox').length);//多选按钮
	alert($('#form1 :submit').length);//提交按钮
	alert($('#form1 :input').length);//不仅仅input元素
	alert($('#form1 input').length);//form1下的所有input标签,标签的名字.
});

$(function()
{
	alert($('.test').length);//class 
	//加空格找后代元素
	alert($('.test :hidden').length); //选择class为test的元素下的的子标签中样式为hidden的后代标签
	alert($('.test:visible').length); //可见并且class为test的元素
});
</script>
 </head>
 <body>
 <div class="test">
    <div style="display:none">aaaa</div>
    <div style="display:none">bbbb</div>
    <div style="display:none">cccc</div>
    <div style="display:none" class="test" >dddd</div>
 </div>
 <div class="test" style="display:none">eeee</div>
 </body>

分享到：
| Google MapSite
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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