首页 > 代码库 > Jquery二

Jquery二

2024-09-18 05:00:11   217人阅读

<script src="http://www.mamicode.com/jquery.js"></script>

文档处理:

-----内部插入

var test=$("<li>test</li>");　　　　创建

$("ul").append(test);　　　　　　　添加到ul标签中(最后加入)

appendTo()；　　　　　　　　　　同上

prepend();　　　　　　　　插入标签中前面

prependTo();　　　　　　　同上，反向用

-----外部插入

after();　　　往选中的元素外部前面添加

before();　　往选中的元素外部后面进行添加

--

empty()　　将元素内部的内容删除

remove()　　将元素的标签移除

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        select{
            width:150px;
            height:300px;
        }
    </style>
</head>
<body>
<select name="fruit" id="fruit" multiple></select>
<input type="button" value="<---" onclick="toleft();">
<input type="button" value="<===" onclick="totalleft();">
<input type="button" value="--->" onclick="toright();">
<input type="button" value="===>" onclick="totalright();">
<select name="fish" id="fish" multiple>
    <option value="">大鱼</option>
    <option value="">小鱼</option>
    <option value="">虾米</option>
    <option value="">甲鱼</option>
    <option value="">咸鱼</option>
    <option value="">苹果</option>
    <option value="">香蕉</option>
    <option value="">菠萝</option>
    <option value="">西瓜</option>
</select>
</body>
<script src="jquery.js"></script>
<script>
    function toleft(){
//        append()
        $("#fish option:selected").appendTo("#fruit");
    }

    function totalleft(){
        $("#fish option").appendTo("#fruit");
    }

    function toright(){
        $("#fruit option:selected").appendTo("#fish");
    }
    function totalright(){
         $("#fruit option").appendTo("#fish");
    }
</script>
</html>
左右元素选择

 

事件：

 click,ondbclick,onblur,onfocus,onmouseover,onmouserout,onkeyup,onkeydown

 

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table border="1" width="400px">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
</body>
<script src="jquery.js"></script>
<script>
    $("tr").mouseover(function(){
        $(this).css("background-color","red");
    });
    $("tr").mouseout(function(){
        $(this).css("background-color","white");
    })
</script>
</html>
鼠标移动表格变色
技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text" placeholder="qingshu" >
</body>
<script src="jquery.js"></script>
<script>
    $("input[type=‘text‘]").focus(function(){
        var v = $(this).val();
        if(v == "请输入关键字"){
            $(this).val("");
        }
    });
    $("input[type=‘text‘]").blur(function(){
        var v = $(this).val();
        if(v == ""){
            $(this).val("请输入关键字");
        }
    })
</script>
</html>
输入文本框

 

 

$("xxx").on("click",function(){})

$("xxx").off("click",function(){})

 

阻止事件发生

function cc(){alert("xxxx");

　　return false;　　//阻止

}

重点：表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form action="http://www.baidu.com" id="info" method="get">
    用户名：<input type="text" desc="username"><br>
    密码：<input type="password" desc="password"><br>
    邮箱：<input type="text" desc="mail"><br>
    地址：<input type="text" desc="addr"><br>
    <input type="submit" value="提交" >
</form>
</body>
<script src="jquery.js"></script>
<script>
    $(":submit").click(function(){
        var flag = true;
        $(".err").remove();
        $("input[type=‘text‘],input[type=‘password‘]").each(function(){
            var v = $(this).val();
            if(v.length == 0 ){
                flag = false;
                var desc = $(this).attr("desc");
                $(this).after($("<span class=‘err‘>" + desc + "必填</span>"));
//                return false;
            }
        });
        return flag;
    })
</script>
</html>

 

    页面加载  

 

技术分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
           $("div").click(function(){
                console.log("dsadsadsa");
            })
        });
        $(document).ready(function(){
           $("div").click(function(){
                console.log("dsadsadsa");
            })
        });

    </script>
</head>
<body>
<div>
    dsjandksandksank
</div>
</body>
</html>
xx

 

                  

Jquery二


联系
我们