美文网首页
jquery常用技巧及常用方法列表集合

jquery常用技巧及常用方法列表集合

作者: minyan962464 | 来源:发表于2017-10-23 20:15 被阅读0次

    关于页面元素的引用
    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

    Jquery中的很多方法都是如此,主要包括如下几个:
    $("#msg").html(); //返回id为msg的元素节点的html内容。
    //将"new content" 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
    $("#msg").text(); //返回id为msg的元素节点的文本内容。
    //将"new content" 作为普通文本串写入id为msg的元素节点内容中,页面显示new content
    $("#msg").height(); //返回id为msg的元素的高度
    $("#msg").height("300″); //将id为msg的元素的高度设为300
    $("#msg").width(); //返回id为msg的元素的宽度
    $("#msg").width("300″); //将id为msg的元素的宽度设为300
    $("input").val("); //返回表单输入框的value值
    $("input").val("test"); //将表单输入框的value值设为test
    $("#msg").click(); //触发id为msg的元素的单击事件
    $("#msg").click(fn); //为id为msg的元素单击事件添加函数
    同样blur,focus,select,submit事件都可以有着两种调用方法

    操作元素的样式
    主要包括以下几种方式:
    $("#msg").css("background"); //返回元素的背景颜色
    $("#msg").css("background","#ccc") //设定元素背景为灰色
    $("#msg").height(300); $("#msg").width("200″); //设定宽高
    $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
    1 $("p") 所有的p
    2 $("p:first") 第一个p
    3 $("p:last") 最后一个p
    4 $("p:eq(3)") 下标为3的p
    5 $("p:lt(3)") 下标小于3的p
    6 $("p:gt(3)") 下标大于3的p
    7 $("p:odd") 下标是奇数的p
    8 $("p:even") 下标是偶数的p

    从每一个匹配的元素中(添加)删除绑定的事件。
    例如:
    $("p").bind("click", function(){.text());}); //为每个p元素添加单击事件
    $("p").unbind(); //删除所有p元素上的所有事件
    $("p").unbind("click") //删除所有p元素上的单击事件

    相关文章

      网友评论

          本文标题:jquery常用技巧及常用方法列表集合

          本文链接:https://www.haomeiwen.com/subject/xnxzuxtx.html