整理的jquery使用技巧

jQuery实战技巧

最新推荐文章于 2022-02-23 17:07:17 发布

原创最新推荐文章于 2022-02-23 17:07:17 发布 · 204 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一系列jQuery的实际应用技巧，包括禁用右键菜单、新窗口打开链接、输入框聚焦效果、获取鼠标位置、根据浏览器大小调整样式、居中显示元素、检测鼠标按键、键盘事件处理、选择下拉选项、切换复选框状态、定时隐藏元素及表格单元格高亮等功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery学习技巧</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <style>
        .hover{
            background: #ddd;
        }
    </style>

</head>
<body>
<h1>学习测试jquery</h1>

<div style="border: 1px solid red;" >
    <a href="http://www.baidu.com" rel="external">打开链接</a>
    <input type="text" class="text1"/>
    <p id="XY"></p>
    <select id="element">
        <option>小王</option>
        <option>小狗</option>
        <option>小猫</option>
    </select>
    <button>按钮</button>
    <input type="checkbox" value="1"/>1
    <input type="checkbox" value="2"/>2
    <input type="checkbox" value="3"/>3


</div>

<table>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>

</table>

<div id="load">loading...</div>

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function () {

        //禁用页面的右键菜单
        $(document).bind("contextmenu",function (e) {
            return false;
        });

        //新窗口打开页面
        $("a").attr("target","_blank");
        //或者
        $("a").click(function () {
            this.target = "_blank";
        });

        //输入框文字获取和失去焦点
        $("input.text1").val("请输入");
        textFill($("input.text1"));
        function textFill(input) {
            var original_value = input.val();
            input.focus(function () {
                if($.trim(input.val()) == original_value){
                    input.val('');
                }
            }).blur(function () {
                if($.trim(input.val()) == ''){
                    input.val(original_value);
                }
            });
        }

        //获取鼠标位置
        $(document).mousemove(function (e) {
            $("#XY").html("X:" + e.pageX + "| Y:" + e.pageY);
        })
        
        //点击div也可以跳转
        $("div").click(function () {
            window.location = $(this).find("a").attr("href");  //一定要加attr，否则报错404
            return false;      //防止点击超链接a做两次跳转
        });

        //根据浏览器的大小添加不同的样式
        function checkWindowSize() {
            if($(window).width() > 1200){
                $("body").addClass("large");
            }else{
                $("body").removeClass("large");
            }
        }
        $(window).resize(checkWindowSize());

        //设置div在屏幕中央
        $.fn.center = function () {
            this.css("position","absolute");
            this.css("top",($(window).height() - this.height())/2 + $(window).scrollTop() + "px");
            this.css("left",($(window).width() - this.width())/2 + $(window).scrollLeft() + "px");
            return this;
        }
        $("#XY").center();

        //检测鼠标的右键和左键
        $("#XY").mousedown(function (e) {
            alert(e.which);    // 1 左键  2  中间   3  右键
        })

        //回车提交表单
        $("input").keyup(function (e) {
            if(e.which == "13"){
                alert("回车提交");
            }
        });

        //获取选中的下拉框
        alert($("#element").find("option:selected").val());
        $("#element option:selected");

        //切换复选框
        var tog = false;
        $("button").click(function () {
            $("input[type=checkbox]").attr("checked", !tog);
            tog = !tog;
        });

        //在一段时间后自动隐藏或关闭元素
        $("div").slideUp(300).delay(3000).fadeIn(400);

        //
        $("table").on("click","td",function () {
            $(this).toggleClass("hover");
        })

    });
</script>
</body>
</html>