JQuery入门

最新推荐文章于 2020-02-02 20:26:07 发布

sust2012

最新推荐文章于 2020-02-02 20:26:07 发布

阅读量843

点赞数

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

本文链接：https://blog.csdn.net/sust2012/article/details/8653062

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/jquery.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.0.js"></script>
<script type="text/javascript" src="js/operTable.js"></script>
<script type="text/javascript">
   $(document).ready(function() {
       //(一选择器)

       //var length = $("span").length;
       //测试选择器
       //(1) id选择器
       var menu1 = $("#menu1").text();
       //   alert(menu1);
       //   (2)class选择器
       var div1 = $("div.showMenuDiv#item1 ul li:first");
       var div2 = $(".showMenuDiv");
       //alert(div1.text());
       //(3)标签选择器
       var span = $("span");
       //alert(span.length);
       //(4)属性选择器
       var item1href = $("[href^='menu1']");
       //alert(item1href.length);
       var ahref = $("a[href]");
       //alert(ahref.length);
       $("a[href]").each(function() {
           //   alert($(this).attr("href"));
       });

       $("span[id^='menu']").click(function() {
           $(this).next().toggle(2000);
       });

       //(5)层次选择器
       //alert($("#item1 li").length);
       //alert($("#item1>ul").length);
       var nextVar = $("#menu1+next");
       //   alert(nextVar.attr("id"));

       //过滤选择器
       //(1)基本过滤选择器
       //对一个table的操作
       var tableDiv = $("#tableDiv");
       $("[name='createTable']").click(function() {
           createTable(tableDiv);
           testPend();
           myReplace();
           //给每一列加上事件
           var tds = $("#myTable tr td");
           changeTrCss(tds);
       });
       //createTable(tableDiv);
       //事件

       //在任意位置添加行
       var addButton = $("input[value='添加新行']");

       addButton.click(function() {
           var rowNumber = $("input[name='rowNumber']").val();
           //alert(rowNumber);
           addRow(rowNumber);
       });

       //删除任意位置的行
       var deleteButton = $("input[value='删除行']");
       deleteButton.click(function() {
           var rowNumber = $("input[name='rowNumber']").attr("value");
           //alert(rowNumber);
           deleteRow(rowNumber);
       });

       //(2)内容过滤选择器
       //eg:取到所有包含menu文本的超链接 //是个模糊定位
       var a = $("a[href]:contains('menu')");
       $.each(a, function(x, data) {
           //   alert($(data).attr('href'));
       });

       //(3)可见性过滤器
       var visibleSelecter = $("div:hidden");
       $.each(visibleSelecter, function() {
           //   alert($(this).attr("id"));
       });

       //(4)子元素过滤器
       var firstChild = $("#myTable:nth-child(2)");
       //alert(firstChild.text());

       //(5)表单对象属性过滤选择器
       var formSelecter = $(":enabled");
       $.each(formSelecter, function() {
           //   alert($(this).attr('type'));
       });

       //(6)表单选择器
       var inputSelecter = $("[name='rowNumber']");
       //alert(inputSelecter.length);
       inputSelecter = $("[name='rowNumber']:input");
       //alert(inputSelecter.val());

       //(二)dom操作
       //dom操作见operTable.js
       //(四css操作)
       //css操作
       //(1)addClass
       $("[value='addCss']").click(function(){
           $("#testSpan").addClass("testCss");
       });

       //(2)移去css
       $("[value='removeCss']:button").click(function(){
           $("#testSpan").removeClass("testCss");
       });


       //(六)   常用的遍历节点方法
       //children
       var child = $("#item1 ul").children();
         //alert(child.length);

         //next
       var liNext = $("#item1 ul li:first").next();
       //alert(liNext.children().attr("href"));

       //prev
       var div1 = $("#item1");
       //alert(div1.prev().attr("id"));

   });
</script>
</head>
<body>
   <span id="menu1">menu1</span>
   <div id="item1" class="showMenuDiv">
       <ul>
           <li><a href="menu1_item1.html">menu1_item1</a>
           </li>
           <li><a href="menu1_item2.html">menu1_item2</a>
           </li>
           <li><a href="menu1_item3.html">menu1_item3</a>
           </li>
           <li><a href="menu1_item4.html">menu1_item4</a>
           </li>
       </ul>
   </div>
   <br>
   <span id="menu2">menu2</span>
   <div id="item2" class="showMenuDiv">
       <ul>
           <li><a href="menu2_item1.html">menu2_item1</a>
           </li>
           <li><a href="menu2_item2.html">menu2_item2</a>
           </li>
           <li><a href="menu2_item3.html">menu2_item3</a>
           </li>
           <li><a href="menu2_item4.html">menu2_item4</a>
           </li>
       </ul>
   </div>
   <div id="tableDiv"></div>
   <span name="rowNumber"></span>
   <br>
   <input type="button" name="createTable" value="创建table">
   <form action="">
       第：<input type="text" name="rowNumber" value="1">行<input
           name="button" type="button" value="添加新行"><br> <input
           name="button" type="button" value="删除行"><br>
       append,prepend 测试<br> <input type="button" name="append"
           value="append"><br> <input type="button" name="prepend"
           value="prepend"><br> replaceWith 测试，eg,将1，3的值互换<br>
       <input type="button" value="replace" name="replace">
   </form>
   <br><br><br>
   <span id="testSpan">测试css</span><input type="button" value="addCss"><input type="button" value="removeCss">
   <br>
   <br>
   <a href="goajax.html">jquery ajax</a>
</body>

</html>

sust2012

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery入门

pageEncoding="UTF-8"%> $(document).ready(function() { //(一选择器) //var length = $("span").length; //测试选择器 //(1) id选择器 var men
复制链接

扫一扫