jquery讲解（二） -

zpx138332
浏览: 46159 次
性别:
来自: 河北
最近访客更多访客>>

chen_vogue
esxd_2015
li315186166
runmu_79
博主相关

博客
微博
相册
留言
关于我
文章分类

社区版块

存档分类

jquery讲解（二）

jQuery HTML JavaScript QQ CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Demo01.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!-- 引入Jquery的js文件 -->

   <script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
   <script>
   
   /**
           内容选择器
           1、:contains("") 匹配含有指定文本的元素对象集合td:contains("aaa");获取含有aaa的td的对象集合

           2、:empty 匹配空元素 没有子元素或没有文本的元素
           3、:has(text) 匹配含有指定选择器所有匹配的元素的对象集合$("#tbdy:has(.rdc)");获取tbdy中含有.rdc的tbdy的对象集合
           4、:parent 匹配含有子元素或者文本的元素的对象集合

           总结：在内容选择器中谁(A)匹配谁(B)那就是获取A对象的集合

    */
      
     /**页面载入事件处理*/
     $(function(){
         
           /**获取td中含有10的td的对象集合*/
           var $tds = $("td:contains('redarmy')");
           /**输出此集合的长度*/
           alert($tds.size()+"=========="+$tds.text());
           
           /**获取tr中含有redarmy的tr对象的集合*/
           var $rtds = $(".rdc:contains('redarmy')");//tr对象
           /**输出此集合的长度*/
           alert($rtds.text()+"-------"+$rtds.size());
           /**获取rdc中td的含有redarmy的td对象集合*/
           var $rtds1 = $(".rdc>td:contains('redarmy')");//td对象
           alert($rtds1.size()+"===="+$rtds1.text());
           
           /**获取id为qw的tr对象中td的空元素*/
           var $etd = $("#qw>td:empty");
           
           alert($etd.size()+"==="+$etd.html()); //html没有打印<td></td>
           
           //获取tbody中含有rdc的tbody对象
           var $tbdys = $("#tbdy:has(.rdc)");
           alert($tbdys.html()+"------------"+$tbdys.size());
            //获取tbody中含有rdc的tr对象集合
            var $trs = $("#tbdy>.rdc");
           alert($trs.html()+"------------"+$trs.size()); 
           
           //获取.rdc中含有子元素或者文本元素的.rdc的对象
           var $tdps = $(".rdc:parent"); //tr对象
           
           alert($tdps.html()+"--------"+$tdps.text());
            
           
     
     })
   
   </script>
  </head>
  
  <body>
       <div align="center">
        <div>
           <h1>内容选择器的应用</h1>
        </div>
        
        	<div>
				<table border="1px" cellpadding="0" cellspacing="0">
					<thead>
						<tr id="thed">
							<th>
								序号
							</th>
							<th>
								名称
							</th>
							<th>
								邮箱
							</th>
						</tr>
					</thead>

					<tbody id="tbdy">
						<tr class="rdc">
							<td></td>
							<td>
								redarmy_chen
							</td>
							<td>
								redarmy_chen@qq.com
							</td>
						</tr>

						<tr>
							<td>
								1002
							</td>
							<td>
								l_j
							</td>
							<td>
								redarmy_chen@qq.com
							</td>
						</tr>

					
						<tr>
							<td>
								1004
							</td>
							<td>
								x_j
							</td>
							<td>
								redarmy_chen@qq.com
							</td>
						</tr>
						
						<tr id="qw">
						  <td></td>
						  <td colspan="2"/>
						  <td>1</td>
						</tr>
					</tbody>
					<!-- 为了测试：parent -->
					<tr class="rdc">
					aaa
					</tr>

				</table>
			</div>
     
     </div>
  </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Demo02.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!-- 引入Jquery的文件 -->
<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>
<script>
   /**页面载入处理*/
   
   function test(){
    /**不可见性的测试*/
        var $hids = $("div:hidden");
        alert($hids.html()+"----------"+$hids.text());
        /**可见性测试*/
        var $vlis = $("#rdc:visible");
        alert($vlis.html());
        
        
        /**表单选择器*/
        var $btns = $(":button");
        /**获取button按钮中的value属性的值*/
        alert($btns.attr("value")+"------------"+$btns.size());
        /**遍历所有的button的value属性值*/
        for(var i=0;i<$btns.size();i++){
              /**注意DOM对象转换成Jquery对象 |Jquery对象转换成DOM对象*/     
         // alert($($btns[i]).attr("value"));
        }
        
        //获取btn的子元素为button按钮的input对象
        var $divbtns = $("#btn>input:button");
        alert($divbtns.size());
        
        
        //获取所有checkbox的复选框
        var $ckbs = $(":checkbox");
        
        //获取ckb中所有checkbox的复选框
         var $ckbs1 = $("#ckb input:checkbox");
        alert($ckbs1.length);
        
        
           //获取所有的input select 的对象集合
        var $ipts = $(":input");
        alert($ipts.size());
   
   }
   $(function(){
      //获取所有的checkedinput表单对象 不包含select中的option
      //var $ickeds = $("input:checked");
      var $ickeds = $("input[checked='true']");
      alert($ickeds.length);
      //获取所有复选框被选中的表单对象
      /**
      var $ckbs = $("input:checkbox:checked");
      alert($ckbs.length);
      */
      
      /**根据属性attribute=value*/
      var $ckbs = $("input[type='checkbox']:checked");
      alert($ckbs.length);
      
      /**表单对象的属性：
           :checked 
           :disabled
           :enabled
           :selected 
       以上的结果可以通过属性进行改造：
           input[checked='true']

          作业：查看上面三种是否也可以改造*/
      
               
   });
</script>
	</head>

	<body>
		<div>
			<div>
				<h1>
					可见性的测试
				</h1>
			</div>

			<div>
				<div style="display: none;">
					通过样式设计不可见！
				</div>
				
				<div>
				  <form action="">
				    <table>
				       <tr id="rdc">
				         <td>用户名：</td>
				         <td><input type="text" name="name"/></td>
				       </tr>
				       <tr>
				         <td>性别：</td>
				         <td><select name="sex">
				              <option>男</option>
				              <option>女</option>
				             </select></td>
				       </tr>
				       <tr>
				         <td>年龄：</td>
				         <td><input type="text" name="age"/></td>
				       </tr>
				       <tr>
				         <td>邮箱：</td>
				         <td><input type="text" name="email"/></td>
				       </tr>
				       <tr>
				         <td>上传：</td>
				         <td><input type="file" name="file"/></td>
				       </tr>
				       <tr id="ckb">
				         <td>爱好：</td>
				         <td><input type="checkbox" name="fav"/> 看书
				         <input type="checkbox" name="fav" checked="checked"/>打球
				         <input type="checkbox" name="fav"/>篮球
				         <input type="checkbox" name="fav"/>游泳
				         </td>
				       </tr>
				       <tr>
				         <td><input type="hidden" value="id" name="id"/></td>
				         <td><input type="button" value="修改"/></td>
				       </tr>
				    </table>
				  </form>
				</div>
			</div>

           <div id="btn">
           <input type="button" value="修改1"/>
           <input type="button" value="修改2"/>
           <input type="button" value="修改3"/>
           <input type="checkbox" name="fav" checked="checked"/>游泳
           
           <input type="radio" checked="checked"/>man
           <input type="radio"/>woman
           
           </div>
		</div>
	</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Demo03.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

		<!-- 引入jquery的js文件 -->
		<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>

		<script>

function test() {
	/**测试设置属性值
	        attr("key",fn)*/
	$("#attr>input").attr("value", function() {
		return "redarmy";
	});
	alert("-------中介线-------");
	/**设置属性及属性值 attr(key,value);*/
	$("#attr>input").attr("value", "m_j");

	//获取值
	var name = $("#attr>input").attr("name");
	alert(name);
	//匹配元素中批量设置很多属性的最佳方式
	/**attr(properties) 名/值   {}*/
	$("#attr>input").attr( {
		value : "x_l",
		disabled : "disabled"
	});

	/**移除某个属性*/
	$("#attr>input").removeAttr("disabled");

	/**添加类名*/
	$("#attr>input").addClass("ipt");
	/**移除类名*/
	$("#attr>input").removeClass("ipt");
	  alert("---------------------------执行之前观察效果");
	/**如果存在（不存在）就删除（添加）一个类。
	 */
	$("#attr>input").toggleClass("ipt")
	 alert("---------------------------执行之后观察效果");
	 
	$("#attr").html('邮箱：<input name="name" type="text" />');
	
	$("#attr").text("<u>Some</u> new text");
	
	alert($("#single").val("Single2"));
}
$(function() {
  
	/*如果是type =checkbox,radio,select val值代表的是checked,selected
      type="text" val("")代表的是value的值*/
	$("#nam").val("HelloWorld");
	
});
</script>
		<style>
.ipt {
	border-color: red;
}
</style>
	</head>

	<body>
		<div align="center">

			<div id="attr">
				用户名：
				<input name="name" type="text" class="ipt" />
				密码：
				<input name="name" type="text" id="nam"/>
			</div>

            <div>
	            <select id="single">
				  <option>Single</option>
				  <option>Single2</option>
	            </select>
            
            </div>
		</div>
	</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Demo04.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">


		<!-- 引入Jquery的js文件 -->
		<script type="text/javascript" src="./js/jquery-1.4.4.js">
</script>
		<script type="text/javascript">

function test() {
	/**eq()匹配结果中的第几个对象*/
	var $p = $("p").eq(1);
	alert($p.html());

	/**filter("")过滤*/
	var $p1 = $("p").filter(".rcd");
	alert($p1.html());
	/**filter(",,,,....")可以有多个表达式*/
	var $p2 = $("p").filter(".rcd,:first");
	alert($p2.text());
}
$(document).ready(function() {
    /**把鱼$(#ad>p).span连接成一个对象*/
	var $adp = $("#ad>p").add("span");

	alert($adp.text())

});
</script>
	</head>

	<body>
		<div>
			<div>
				<h1>
					筛选的使用
				</h1>
			</div>

			<div>
				<p>
					过滤
				</p>
				<p>
					查找
				</p>
				<p class="rcd">
					串联
				</p>
			</div>

			<div id="ad">
				<p>
					Hello
				</p>
		




		<span> redarmy_chen </span>
			</div>
		</div>
	</body>
分享到：