【jQuery】入门 WRITE LESS , DO MORE

最新推荐文章于 2021-05-10 15:11:23 发布

Jeep_Dom

最新推荐文章于 2021-05-10 15:11:23 发布

阅读量946

点赞数

分类专栏： Javascript 文章标签： jquery

本文链接：https://blog.csdn.net/jeep_ouc/article/details/17171533

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

jQUery 初识

jQuery 是 javascript 库，封装了很多预定义的对象和实用函数。轻量级的js库，是一个优秀的javascript框架，宗旨是 " WRITE LESS ,DO MORE "

jQuery 对象是通过jQuery 包装DOM对象后产生的对象，如果一个对象是jQuery 对象，那么它可以实用jQuery中的方法，但是jQuery无法使用DOM对象的任何方法，同理 Dom也不能够使用jQuery中的任何方法。

DOM对象转换成jQuery对象 var $varibleName = $(DOM对象);

jQuery对象转换成DOM对象 1、jQuery 对象是一个数组对象，可以通过[index]的方法得到相应的对象 2、通过.get(index)方法得到相应的DOM对象

jQuery 选择器

jQuery 例子

1、给每一个p 元素添加 click事件

<body>
	<p>段落1</p>
	<p>段落2</p>
	<p>段落3</p>
</body>
<script>
		//方法一： 遍历集合和数组  $("p").each(fucntion(index,domEle){});
		/*  $("p").each(function(index,domEle){ //each遍历元素，index表示索引从下标0开始，domEle = this 当前对象的引用
			$(domEle).click(function(){
				 alert($(this).html());  //html()/ text() 获取文本对象
			 });
		 }); */
	  	//方法二： 使用 jQuery.each(object,[callback])  "jQuery. "方法是全局方法，可以直接使用
	  	$.each($("p"),function(index,domEle){
	  		$(domEle).click(function(){
				 alert($(domEle).text());  
			 });
	  	});	 
</script>

2、表格隔行变色

<body>
 	<table border="1">
 		<tr><td>第一行</td><td>第一行</td></tr>
		<tr><td>第二行</td><td>第二行</td></tr>
		<tr><td>第三行</td><td>第三行</td></tr>
		<tr><td>第四行</td><td>第四行</td></tr>
		<tr><td>第五行</td><td>第五行</td></tr>
		<tr><td>第六行</td><td>第六行</td></tr>
 	</table>
</body>
<script>
	window.onload = function(){
		$("table tr:odd").css("background","red");  // 过滤选择器
	}	 
</script>

3、下拉列表移动， WRITE LESS , DO MORE

<script type="text/javascript">
  window.onload = function(){
	  $("#add").click(function(){ //选中的从左边移动到右边
		$("#second").append($("#first option:selected"));
	  });
	  $("#add_all").click(function(){ //全部从左边移动到右边
			$("#second").append($("#first option"));
	  });
	  //双击从左边移动到右边
	  $("#first").click(function(){ //选中的从左边移动到右边
			$("#second").append($("#first option:selected"));
	  });	  
  }
</script>

</head>
<body>
	<table width="285" border="0" align="left">  
    <tr>  
        <td width="126">  
            <select name="first" size="10" multiple="multiple" id="first" οndblclick="db()">  
                <option value="1">选项1</option>  
                <option value="2">选项2</option>  
                <option value="3">选项3</option>  
                <option value="4">选项4</option>  
                <option value="5">选项5</option>  
                <option value="6">选项6</option>   
            </select>  
        </td>  
        <td width="69" valign="middle">  
            <input id="add" name="add" type="button" value="-->" />  
            <input id="add_all" name="add_all" type="button" value="==>" />  
        </td>  
        <td width="127" align="left">  
            <select name="second" size="10" multiple="multiple" id="second">  
                <option value="选项8">选项8</option>  
            </select>  
        </td>  
    </tr>  
   </table>

4、添加一个文本节点

<script type="text/javascript">
  window.onload = function(){
	//在city下增加湖南节点<li id="hn" value="hunan">湖南</li>
	//创建<li></li>
	var $hn = $("<li></li>"); // $("<li/>")
	//创建<li id="hn" value="hunan"></li>
	$hn.attr("id","hn");
	$hn.attr("value","hunan");
	//<li id="hn" value="hunan">湖南</li>
	$hn.text("湖南");	
	//最后添加到city下
	$("#city").append($hn);
  }
</script> 

</head>
<body>
	 <ul id="city">
	 	<li id="bj" value="beijing">北京</li>
	 	<li id="sh" value="shanghai">上海</li>
	 	<li id="tj" value="tianjin">天津</li>
	 </ul>
</body>

5、登陆界面，当账号为空时为默认值

<body>
账号：<input id="user" type="text" value="用户邮箱/手机号/用户名" /><br />
密码：<input id="psw" type="password" value="" /><br />
  <input id="btn" type="button" value="登陆" />
</body>
<script>
	window.onload = function(){
		//获取焦点
		$("#user").focus(function(){
			 //获取当前的文本框值
			 var curValue = $(this).val();
			 //如果当前的文本框值和默认值相等
			 if(curValue == this.defaultValue){
				 $(this).val("");
			 }
		});<body>
 <div class="box">
 	<h1>收缩展开效果</h1>
 	<div id="menu1">
	 	1<br />
	 	2<br />
	 	3<br />
	 	4<br />
	 	5<br />
	 </div>
 </div>
 <div class="box">
 	<h1>收缩展开效果</h1>
 	<div id="menu1">
	 	1<br />
	 	2<br />
	 	3<br />
	 </div>
 </div>
</body>
<script>
//弹出层，收缩、展开效果
	window.onload = function(){
		 $("h1").each(function(){
			 $(this).click(function(){
				$(this).next().slideToggle(1000); 
			 });
		 });
	}
</script>
		//失去焦点
		$("#user").blur(function(){
			 var curValue = $(this).val();
			 //判断当前的文本值是否为空
			 if($.trim(curValue) == "") {
				 //如果为空，设置为默认值
				 $(this).val(this.defaultValue);
				 }
		});
	}
</script>

6、收缩展开效果

<body>
	 <div class="box">
	 	<h1>收缩展开效果</h1>
	 	<div id="menu1">
		 	1<br />
		 	2<br /><span style="white-space:pre">			</span>
		 	3<br />
		 	4<br />
		 	5<br />
		 </div>
	 </div>
	 <div class="box">
	 	<h1>收缩展开效果</h1>
	 	<div id="menu1">
		 	1<br />
		 	2<br />
		 	3<br />
		 </div>
	 </div>
</body>
<script>
//弹出层，收缩、展开效果
 	window.onload = function(){
 		 $("h1").each(function(){
 			 $(this).click(function(){
 				$(this).next().slideToggle(1000); 
 			 });
 		 });
 	}
</script>