jQuery入门

一.jquery通过选择器精准找到元素：

<style type="text/css">
			div{padding:8px 0px;font-size: 12px;text-align: center;border:solid 1px #888;}
</style>

<script src="jquery-2.2.1.min.js" type="text/javascript">
</script>

<script type="text/javascript">
	$(document).ready(function (){
		$("div").html("Hello,welcome to jquery");
	});
			
</script>

CLASS：

	<style type="text/css">
		.frame { border:solid red 1px ;font-size:13px;}
		.title { padding :6px ;background-color:#EEE;}
		.content { padding :8px 0px;font-size:12px;text-align:center;display:none;}
		.curcol { background-color:yellow;}

	</style>
	<script type="text/javascript">
		$(function(){
			$(".content").html("Hello,welcome to jQuery");
			$(".title").click(function(){
				$(this).addClass("curcol").next(".content").css("display","block");
			});
		});
	</script>
</head>
<body>
	<div class="frame">
		<div class="title">标题</div>
		<div class="content"></div>
	</div>
</body>

　　

 

　　

ID：

<input id = "btnSubmit" type = "button" value = "submit" class = "btn" onclick = "btn_Click();" /><br/><br/>

　　

$("#btnSubmit").click(function(){}

　　

总结：

ID：$("#name")

CLASS:$(".name")

 

 

二.学习到的几个重要函数：

1. $(document).ready(function (){}）  =  $(function(){}）

2.

			$(".title").click(function(){
				$(this).addClass("curcol").next(".content").css("display","block");
			});

　　

分析：$(".title")找到对应的元素，给他添加click监控器，接下来就是click的响应函数的内容：$(this).addClass("curcol").next(".content").css("display","block");

首先，这里的this是指调用这个函数的主体，也就是$(".title")这个元素，addClass函数的作用是给调用的元素添加一种样式，这里给$(".title")元素追加了“curcol”样式，这里对$(".title")元素的操作结束了，使用.next（）函数转对其他元素进行操作。这里转对$(".content")元素进行处理。对$(".content")元素使用css（）函数来对现有的css样式进行修改。

注：addClass 是追加样式，在现有的样式上面追加一些其他东西。

      css 是对现有的样式进行修改

　　另外，$(this).toggleClass("new");是对元素样式的动态切换。比如：

			$(".defcol").click(function(){//旧的样式名为old
				$(this).toggleClass("new");
			})

　　

一开始，defcol的样式名为“old”，当用户点击到defcol元素时，defcol元素抛弃了“old”元素，使用“new”样式，当用户再次点击defcol元素，defcol抛弃“new”样式，使用“old”样式。类似循环，动态切换。

 

3.

var oRdoValue=$("#Radio1").is(":checked")?"man":"woman";

如果Radio1被勾选，则oRdoValue的值是man，反之是woman

 

 

以上，就是进段时间对jQuery的入门摸索。

 

posted @ 2016-03-07 14:48  冲刺的大学狗  阅读(251)  评论(0)    收藏  举报