jquery1

文档就绪事件

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

元素选择器

$("p")

用户点击按钮后，所有 <p> 元素都隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>this is a title</h2>
<p>this is a prams</p>
<p>this is a prams</p>
<button>click me</button>
<script src="../jquery-3.31.js"></script>
<script>
$(document).ready(function(){
    $('button').click(function(){
        $("p").hide();
    });
    $('button').dblclick(function(){
        $("p").show()
    });
})
</script>
</body>
</html>

View Code

#id 选择器

$("#test")

实例

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

View Code

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

$("*") 选取所有元素

$(this) 选取当前HTML 元素

$(document).ready(function(){
    $("button").click(function(){
        $(this).hide();   //button隐藏
    });
});

$("p.intro") 选取 class 为 intro 的 <p> 元素

$("p:first") 选取第一个 <p> 元素

$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素

$("ul:first") 选取第一个 <ul> 元素

$(":button") 选取所有 type="button" 的 <input> 元素和 <button> 元素

jQuery 事件

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

　　在元素上移动鼠标

　　选取单选按钮

　　点击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当按下按键时触发 keypress 事件"。

鼠标事件

当单击元素时，发生 click 事件。

click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

$(document).ready(function(){
    $("p").click(function(){
        alert("parms was click")
    })
})

dblclick 当双击元素时，触发 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，则会产生问题。

$(document).ready(function(){
    $("p").dblclick(function(){
        alert("parms was click")
    })
})

$(document).ready(function(){
    $("p").dblclick(function(){
        $(this).fadeOut();
    });
});

mouseenter()

当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。

当鼠标指针进入 <p> 元素时，设置背景色为黄色：

该事件通常与 mouseleave事件一起使用。

$(document).ready(function(){
    $("#p2").mouseenter(function(){
        $("#p2").css("background-color","yellow");
    });
       $("#p2").mouseleave(function(){
        $("p").css("background-color","white");
    });
});

键盘事件

keypress()

i=0
$(document).ready(function(){
    $("input").keypress(function(){
        $("span").text(i+=1);
    });
});

与 keypress 事件相关的事件顺序：

keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开

keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。

然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。

keydown 当键盘键被按下时发生 keydown 事件。

   $("input").keydown(function(){
        $("input").css("background","yellow");
    });
    $("input").keyup(function(){
        $("input").css("background","pink");
    });

hover

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

方法触发 mouseenter和 mouseleave 事件。

    $("p").hover(function(){
        $("p").css("background","green");
    },function(){
        $("p").css("background","yellow");
    });

表单事件

当提交表单时，会发生 submit 事件。

该事件只适用于 <form> 元素。

submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

<form action="">
    First name:
    <input type="text" name="firstname" value="jack"/><br>
    Last name:
    <input type="text" name="lastname" value="boob"/><br>
    <input type="submit" value="提交"/>
</form>

<script>
$(document).ready(function(){
    $("form").submit(function(){
        alert("提交");
    });
});
</script>

change

当元素的值改变时发生 change 事件（仅适用于表单字段）。

change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

<input type="text" class="field"/>
<p>
    汽车匹配：
    <select name="cars" id="cars" class="field">
        <option value="volvo">volvo</option>
        <option value="byd">byd</option>
        <option value="w">w</option>
    </select>
</p>、

$(document).ready(function(){
    $(".field").change(function(){
        $(this).css("background","#D6D6FF");
    });
});

文档窗口事件

load

该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。

根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

$(document).ready(function(){
  $("img").load(function(){
    alert("图片已载入");
  });
});

scroll() 方法

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

<p>尝试滚动 div 中的滚动条</p>
<div class="school"style="border:1px solid black;width:200px;height:100px;overflow:scroll;">
dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
<p>滚动了 <span class="span1">0</span>次 </p>

x=0;
$(document).ready(function(){
    $(".school").scroll(function(){
        $(".span1").text(x+=1);
    });
});

jquery 效果

显示和隐藏

<p>点我隐藏1</p>
<p>点我隐藏2</p>
<p>点我隐藏3</p>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

<button>显示/隐藏</button>
<p class="p3">sdf1</p>
<p class="p3">sdf2</p>
<p class="p3">sdf3</p>

$(document).ready(function(){
    $("button").click(function(){
        $(".p3").toggle(1000);
    });
});

posted @ 2019-03-11 15:57 xihuxiangri 阅读(225) 评论(0) 编辑收藏举报

刷新页面返回顶部

xihuxiangri