jQuery部分事件

JQuery笔记

jQuery 的功能概括

1、html 的元素选取

2、html的元素操作

3、html dom遍历和修改

4、js特效和动画效果

5、css操作

6、html事件操作

7、ajax异步请求方式

$(document).ready(function () {
    $(".btn2").click(function () {
        $("ul li:first").hide()
    })   //选取第一个<ul>元素的第一个<li>
    $(".btn1").click(function () {
        $("ul li:first-child").hide()
    })  //选取每一个<ul>元素的每一个<li>元素
})

$(":button")	选取所有 type="button"的 <input> 元素和 <button>元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素

 

关于 : 和 [] 这两个符号的理解

：可以理解为种类的意思，如：p:first，p 的种类为第一个。

[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素。

jQuery事件：

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

常用效果：

animate() //自定义动画

hide()  //隐藏  fadeout() //淡出

hover()//模拟光标的悬停事件。

mousedown //鼠标指针移动到元素上方，并同时按下鼠标元素

当鼠标移到元素上，会触发指定的第一个函数（mouseenter，当鼠标移除第一个元素，会触发第二个元素(mouseleave)

$("p").hover(
    function () {
        $(this).html("进入")
    },
    function () {
        $(this).html("离开")
    }
)

$(document).ready(function () {
    $("input").focus(function () {
        $(this).css('background-color',"#cccccc")
    });    //灰色
    $("input").blur(function () {
        $(this).css("background-color","#FFFFFF")
    })   //白色
})