jquery笔记

$(document).ready(function(){

});

这个代码在Dom结构绘制完 后 就马上加载
这个代码可以有多个
或者简写为

$(function(){})

Jquery选择器

$(p) 标签选择器
$(“[name=’myname’]”) 属性选择器，此处的name为标签中的name属性

jquery事件

鼠标移入移除事件
mouseenter
mouseleave
还有其他，建议用这两个

绑定事件

bind 、on 官方推荐用on

$(#id).on("click",".childclass",function(){
   //执行语句
})

on的好处是可以添加到未来元素中，
比如js或者jq动态添加一个元素–>用on也可以绑定这个事件，直接写$(“id”).click(function(){}); 可能无效

第一个参数可以添加 多个 事件名 用空格隔开， 表示绑定多个事件

$(#id).on("click mouseenter",".childclass",function(){
   //执行语句
})

绑定事件另一种写法(键值对)

 $("#id").on({
        click: function() {},
        mouseleave: function() {}
    });

绑定事件的几点说明

//写了子元素名，给子绑定事件
  $("#parent").on("click", "#childer", function() {
        alert("childer");
    })
//不写子元素，父子一起帮定事件
    $("#parent").on("click",  function() {
        alert("parent");
    })
//$(this)，父子一起帮定事件（其实仅仅绑定了父，因为子在父中，so子也有事件）
   $("#parent").on("click", $(this), function() {
        alert("parent");
    })
//随便写一个不存在的子。那么父子都绑定失败（其实仅仅绑定了父）
     $("#parent").on("click", "#dddd", function() {
        alert("parent");
    })

父子一起绑定的 如果没有子，那么仅仅绑定了父

解绑事件

$(“id”).off(“click”)
off是解绑事件，off 如果不指定事件，则解绑所有事件。

比如

$("#myid").off("click").on("click",".childcass",function(){
});

事件名 如果有多个 可以用空格隔开 比如

$("#myid").off("click moudeleave").on("click",".childcass",function(){
});

事件冒泡问题

    $("#parent").on("click", function() {
        alert("p");

    })

    $("#parent").on("click", "#childer", function(event) {
        event.stopPropagation();
        alert("c");

    })

冒泡—》点击子，会调用父的绑定事件
用
event.stopPropagation(); 阻止冒泡

触发器

trigger

       var _p="<div style='width:100px;height:50px;background-color:red;margin-bottom:10px'>呵呵</div>"

        $("#addp").on("click",function(){
            $(this).before(_p);
        })

        $("#trigger").on("click",function(){
            $("#addp").trigger("click","ddd");
        })

获取焦点和失去焦点

focus blur

$("#trigger").on("focus", function() {
        $(this).addClass("ad");

    });

    $("#trigger").on("blur", function() {
        $(this).removeClass("ad");

    });

键盘事件

keyup

keydown

    $("#trigger").on("keydown", function() {
        $("#addp").addClass("ad");

    });

    $("#trigger").on("keyup", function() {
        $("#addp").removeClass("ad");

    });

jq弃用事件

弃用live() on()代替
弃用die() off()代替
弃用size length 代替
弃用 toggle() 无替代

动画效果

显示 隐藏
hide（） hide（）

透明效果&逐渐显示&逐渐消失
fadeTo() fadeIn() fadeOut()

    $(".fadein").click(function(){
        $("#duanlu").fadeTo(1000,0.4); ///透明化
        $("#duanlu").fadeOut();  //消失
        $("#duanlu").fadeIn(); //出现
    });

上下滑动隐藏&显示 & 隐藏/显示
slideup 隐藏
slideDown 显示被隐藏的
slideToggle 如果隐藏则显示 如果显示则隐藏

动画

animate

文档和属性操作

1. text()//更改或者获取文本内容

2. html()//获取或者更改html内容

3. text和html的区别是 html对标签会渲染

4. val() //更改或者获取input 、textarea的值

5. append() 向元素的子元素最后添加 prepend() 向元素子第一个前面添加

6. hasClass() 判断元素是否有指定的class 返回boolean

7. attr() 获取或者或者添加修改属性

8. removeAttr() 删除指定属性

9. css()
   1. 添加单个样式 css(“color”,”red”)
   2. 添加多个css({“color”:”red”,”width”:20})

10. index() 获取索引值 .eq() 在同辈的元素中根据索引值查找元素

11. length 获取长度

12. 1. width() 2. height()

13. children() 查找所有子

14. parent() 查找直属父层

15. parents() 查找父辈层

16. find() 查找指定的后背元素

17. has() boolean子是否有指定元素

18. prex() 相邻的前一个元素

19. next() 相邻的后一个元素

20. siblings() 获取 除本身之外 所有同辈的元素