JQuery入门

<%@ 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>




document.write("<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>");
document.write("<script language='javascript' src='jquery-1.8.0.js'></script>");
function createTable(tableDiv){
    var tableString ="";
    tableString+="<table id='myTable' align='center' border='1' width='200' height='100'>";
    tableString+="<tr><td>key</td><td>value</td></tr>";
    for(var i = 0 ; i <5 ; i++){
        tableString+="<tr><td>key"+i+"</td><td>value"+i+"</td></tr>";
    }
    tableString+="</table>";
    tableDiv.html(tableString);
}
//动态改变每行的样式
function changeTrCss(tds){
    tds.click(function(){
    //tds.css("background-color","red");
    $(this).css("background-color","red");
    alert($(this).text());
});
}
    
    //给table动态的加上一行
    function addRow(index){
        var length = $("#myTable tr").length;
        var inserter;
        if(index>length||""==index||null==index||index<=0){
            inserter = $("#myTable tr:last");
        }else{
            inserter = $("#myTable tr:eq("+(index-1)+")");
        }
        var newRow = "<tr><td>newKey</td><td>newValue</td></tr>";
        $(newRow).insertAfter(inserter);
    }
    
    
    function deleteRow(index){
        var length = $("#myTable tr").length;
        if(index>length||index==""||index==null||index<=0){
            alert("删除的行不存在".toLocaleString());
            return ;
        }
        else{
            index = index -1 ;
            var removeTr = $("#myTable tr:eq("+index+")");
            removeTr.remove();
        }
        
    }
    
    //append ,prepend测试
    function testPend(){
        var newRow = $("#myTable tr:eq(3)").clone(true);
        $("[name*='pend']").click(function(){
            var name= $(this).attr("name");
            if("append"==name){
                $("#myTable").append(newRow);
            }else{
                $("#myTable").prepend(newRow);

            }
            
        });
    }
    
    
    //替换节点    将1,3的值互换
    function myReplace(){
        $("[name='replace']").click(function(){
            var row1 = $("#myTable tr:eq(0)");
            var row3 = $("#myTable tr:eq(2)");
            
            row1.replaceWith(row3.clone());
            row3.replaceWith(row1.clone());
        });
        
        
        
        

    }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sust2012

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值