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

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>

分享到:
评论

相关推荐

    jQuery_api_for_dwcs5为dw安装jquery插件

    2. 配置jQuery:在DWCS5中,打开“Edit &gt; Preferences &gt; JavaScript”,在"Code Libraries"部分点击"+"按钮,然后浏览到jQuery的js文件(通常为jquery.min.js),添加并保存。 3. 使用jQuery:现在,你可以在DW中...

    jquery_dialog jquery_dialog jquery_dialog

    一、jQuery Dialog基础 1. 初始化Dialog:创建Dialog的第一步是选择一个HTML元素,并通过`.dialog()`方法将其转化为对话框。例如: ```javascript $("#dialog").dialog(); ``` 这会将ID为"dialog"的元素转换为一个...

    jquery_api.mxp

    2. 删除元素:$.remove()可以移除匹配的元素,$.detach()则保留事件处理函数的同时移除元素。 3. 查找元素:$.find()用于在当前匹配的元素集中查找后代元素,$.children()则只查找直接子元素。 4. 属性操作:$.attr...

    jquery_study_all and jquery_api and jquery_ui_1.8.6

    总结来说,这个压缩包包含了一份关于jQuery的学习资料,涵盖了从基础到高级的jQuery用法,特别强调了jQuery API和Ajax的使用。通过这些资源,开发者可以深入理解jQuery的工作机制,提升JavaScript编程技能,并熟练...

    jQuery-Lerning.zip_Jquery 基础教程_javascript 教程_jquery_web前端

    《jQuery Learning.zip - Jquery 基础教程_javascript 教程_jquery_web前端》 在Web前端开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个...

    jQuery_基础教程学习

    Jquery的知识 pdf格式的

    jquery_api.rar_jquery_jquery api_jquery chm_jquery 例子

    ### jQuery 基础 - **选择器**: jQuery 的核心在于强大的选择器,它允许开发者轻松选取DOM元素。如 `$("#id")` 选择ID为"id"的元素,`$(".class")` 选择所有class为"class"的元素,`$("tag")` 选择所有特定标签的...

    JQuery_1.4_API

    本CHM手册旨在帮助广大jQuery爱好者快速了解jquery库和jquery开发人员提供一份速查手册。 以上内容来自本版的原作者一揪,下面说说做这版的原因。 一直以来我都是1.1和1.2版的手册同时使用,不肯放弃1.1版的...

    jQuery_EasyUI_jc.rar_JQ_easyui_jquery_jquery easyui

    1. **jQuery基础**:首先,你需要理解jQuery,这是一个强大的JavaScript库,简化了DOM操作、事件处理和Ajax交互。它通过简洁的API让JavaScript编程变得简单易行。 2. **jQuery EasyUI介绍**:jQuery EasyUI 是...

    多选下拉框(jquery_multiselect)

    除了基础的多选下拉框,`jquery_multiselect` 还可以与其他 jQuery 插件结合使用,如 DataTables、Bootstrap 等,实现更复杂的数据展示和交互。例如,可以将其应用于表格列的过滤条件,或者作为表单组件,用于用户...

    jQuery_LigerUI

    总结来说,jQuery_LigerUI是构建高效用户界面的得力助手,它的全面性和实用性体现在各个组件上,而这些组件又通过jQuery的强大基础,为开发者带来便捷的开发体验。无论你是新手还是经验丰富的开发者,jQuery_LigerUI...

    jQuery_Tips_插件

    **jQuery插件基础** jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。jQuery插件是基于jQuery的扩展,可以增加特定的功能或行为到网页中。jQuery_Tips插件是其中一种,用于...

    jQuery1.3及jquery1.4.1和jQuery_API.mxp

    jQuery 1.3 在原有的 CSS 选择器基础上进行了扩展,支持更多的标准 CSS3 选择器,如 `:nth-child()`, `:nth-of-type()`, `:first-child` 和 `:last-child` 等,使得开发者能够更精确地选取页面元素。 ### 2. DOM ...

    jquery_mxp.rar

    首先,jQueryAPI-100214.chm是一个官方的jQuery API帮助文档,包含了从基础选择器到高级插件的全面指南。在这个文档中,你可以找到每个jQuery方法和函数的详细说明,以及相关的示例代码,帮助你快速掌握如何使用这些...

    jquery_ZSlide的插件实现在线ppt查看

    《使用jQuery_ZSlide插件实现在线PPT查看》 在现代网页开发中,为了提供更丰富的用户体验,经常需要在网页上展示PPT文件。jQuery_ZSlide是一款专门用于实现在线PPT查看的JavaScript插件,它基于HTML5技术,使得用户...

    jquery_box.zip

    jQuery选择器是其强大功能的基础,它借鉴了CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element)等,同时增加了基于属性的选择器,如[attr=value]。在“jquery_box.zip”中,我们可以看到如何使用...

    js_html_css_jQuery_bootstrapPDF文档基础到框架

    js_html_css_jQuery_bootstrapPDF文档基础到框架 包含了html css js jquery booststrap 从简到难,讲解详细,初学者可以看懂,满足很多想学习前端的人群

    JQuery Ajax 分页插件 jquery_paginator

    jQuery基础知识 理解`jquery_paginator`之前,首先需要了解jQuery的基本概念和用法。jQuery通过简洁的API,让JavaScript代码更加简洁易读。例如,通过`$`符号选择元素,使用`.click()`绑定点击事件,`.html()`或`....

    Jquery_横向2级菜单

    综上所述,创建一个`jQuery_横向2级菜单`涉及到HTML结构设计、CSS样式定制、jQuery事件处理以及响应式布局的实现。通过这些技术,我们可以创建出一个功能强大、视觉吸引力强且易于使用的二级导航菜单。在实际项目中...

Global site tag (gtag.js) - Google Analytics