jQuery-安装&选择器&事件

安装

CDN方式

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

选择器

css选择器
http://www.runoob.com/cssref/css-selectors.html
例子


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

jQuery选择器例子

语法              	        描述	                
$("*")	                    选取所有元素	         
$(this)	                    选取当前 HTML                   
$("p.intro")	            选取 class 为 intro 的 <p> 元素	
$("p:first")	            选取第一个 <p> 元素
$("ul li:first")	        选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	    选取每个 <ul> 元素的第一个 <li> 
$("[href]")	                选取带有 href 属性的元素	
$("a[target='_blank']")	    选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	
$(":button")	            选取所有 type="button" 的 <input> 元素 和 <button> 元素	
$("tr:even")	            选取偶数位置的 <tr> 元素	
$("tr:odd")	                选取奇数位置的 <tr> 元素

独立文件中使用jquery

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

事件

常见dom事件

鼠标事件	        键盘事件	    表单事件	    文档/窗口事件
click	        keypress	submit	    load
dblclick	    keydown	    change	    resize
mouseenter	    keyup	    focus	    scroll
mouseleave	    blur	    unload      ready
mousedown
mouseup
hover
focus
blur

事件方法语句

$("p").click(function(){
    // 动作触发后执行的代码!!
});

hover()

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

blur

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});
posted @ 2017-03-14 17:23  zhangshihai1232  阅读(74)  评论(0)    收藏  举报