Jquery基础知识点梳理

1、第一个jq程序

　　a、jq对象和dom对象的方法不能混用

　　b、dom对象转换成jq对象$(dom)，jq对象转换成dom对象jq[0]，转换之后方法就可以使用了

2、jq选择器

　　基本选择器

　　$('body') //标签选择器

　　$('#btn') //id选择器

　　$('.class') //类选择器

　　 $('p:odd') //奇偶行选择器
    $('p:even')     
    $('p:first')  //页面中的第一个p
    $('p:last')
    $('p:first-child')  //p的父元素的第一个子元素p
    $('p:first-last')
    $('p:nth-child(1)')  //p的父元素的第一个子元素p
    $('p:nth-of-type(2)')  //p元素是其父元素的第2个p元素  
    $('p:nth-last-of-type(2)')  //倒序

　　额外选择器

    $('div:has(a)') //里面包含a标签的div
    $('a[title]') //属性选择器有title属性的a
    $('a[href^=www]') //以www开头的href值的a
    $('a[href$=pdf]') //以pdf结束的href值的a
    $('a[href="www.jfidg"]') //href值为www.jfidg的a
    $('a[href*=www]') //href属性值里包含www的a
    $('input[type=button]')
    $(':button') //获取所有的按钮
    $(':disabled') //所有被禁用的元素

3、jq基本方法

    $('div').eq(2) //第二个div
    $('div:eq(2)') //eq也可以写在里面
    $('div:gt(2)') //第二个div后面的一个div(此方法只能写在里面)
    $('div').eq(2).siblings() //获取第二个div的兄弟元素
    $('span').not(':eq(2)') //不包括第二个的span
    $('input').not(':button')
    $('span').filter(':eq(2)') //刷选出第二个

    $(".d1").parent() //找到类为d1的一级父元素
    $(".d1").parents() //找到类为d1的所有的祖先父元素
    $(".d1").children() //找到子元素
    $(".d1").prev() //同一级的上一个
    $(".d1").prevAll() //同一级的所有的
    $(".d1").next() //下一个
    $(".d1").nextAll()

4、jq链

    $("div").find("p").addClass("c2").addClass("c1")
    $("div").find("p").addClass("c2").end().addClass("c1") //end是当前结果级的上一个结果，此处是div
    $("div").find("p").addClass("c2").endSelf().addClass("c1") //endSelf表示给当前结果和当前结果的上级都加

5、jq额外方法

    $("div").attr("title") //获取属性值
    $("div").attr("title","aaaa") //设置属性值
    $("div").attr({"title":"aaaa","id":"d3"}) //设置多个属性值
    $("#d4").html() //获取所有，加上参数也可以设置内容
    $("#d4").text() //获取文本
    $("#d2").hasClass("c1") //判断是否含有c1类
    $("#d1").is("p") //判断是否是p元素

    $("div").addClass("d1").filter(function (index) {
        return index==1 || $(this).attr("id")=="d3" //index索引
    }).addClass("c2");

    $("div").append("<p>你好</p>") //追加内容
    $("<p>你好</p>").appendTo('#d1') //加到某个元素中
    $("<p>你好</p>").insertBefore('#d1') //插入到d1前面
    $("<p>你好</p>").insertAfter('#d1') //插入到d1后面
    $("div").mousemove(function () {
        //鼠标移入
    })
    $("div").mousedown(function () {
        //鼠标移出
    })
    $("div").hover(function () {
        //移入事件
    },function () {
        //移出事件
    })

    $('div').size() //获取div的数量
    $('div').css('color','red') //添加样式，设置的是行内样式，权重比较高
    $('div').css({'color':'red','font-size':'14px'})
    $('div').addClass('className') //添加类名，一般用于样式修改
    $('div').removeClass('className') //一次类名
    $('div').find('p') //查询元素

 

转载于:https://www.cnblogs.com/gopark/p/10536161.html