zoukankan      html  css  js  c++  java
  • jQuery常用的API

    1.jQuery给标签添加子元素(父子关系)

       jQuery对象.append("子"); 

       将div标签插入到ul标签之后

    $("ul").append($('div'));

       div标签插入到ul之前

    $("ul").preappemd($('div'))

       将div标签插入到ul标签之后(兄弟关系)

    格式:兄.after($("div"))
    $('ul').after($("div"))

        将div标签插入到ul之前

    $("ul").before($("div"))

    2.取出form里第一个input元素的type属性

    $("form input:first").attar("type");

      设置form下最后一个input元素的为只读文本框

    $("form input:last").attar("readonly","readonly"); 

       创建div元素,添加“啦啦啦”文本,iD属性,并添加到文本中

    var divEl = document.createElement("div");  //创建一个divEl标签
    divEl.setAttribute("id","2015");                     //设置id
    document.body.appenfChild(divEl);               //将其加入到body中

    上面是js是做法,下面是jQuery的实现方法

    var div = $("<div id="XXX"></div>");
    $("body").append("div");

    3.删除id为sessionID的li元素

    $("$sessionID").remove();   //删除sessionID的属性的标签

      删除所有的li元素

    $("li").remove();    //将所有的li删除

    删除ul元素

    $("ul").remove();

    4.取出div中的内容

    $("div").text();

    取的<option>的值和描述[假如有一个城市列表的选择菜单]

    var $option = $("#city option")  定位标签
    var value = $option.val();   获取标签中的值
    var html = $option.text();   将标签里的东西取出来

    5.赋值元input中的元素,添加到input元素后,与其同级

     var $old =$(“:button”);  定位菜单
     var $new = $old.clone();  赋值
     $new.val("新按钮");
     $old.after($new)

    总结:clone()没有参数就只是复制样式,但是如果clone(true)那么就是将事件也会复制过来

    6.为table添加属性,比如添加border/align/width等属性,使用格式是

      attr(“key”,"value")

    将属性删除

     removeAAyyr("key")

    7.添加样式

    将第一个标签添加样式
    $("div:first").addclass("myClass");

      将最后一个标签的样式删除掉

    $("div:last").remove("myclass")

     切换样式,将有样式的变为有样式,将有样式变为无样式了

    $("div").toggleclass("myclass");

    查看标签是否有样式

    var flag=$(div:last).hasClass("myClass");返回boolean值

    8.获取图片坐标

    var offset = $("img").offset();
    var y= offset.left;
    var x= offset.top;
    alert(x,y)

    设置坐标

    $("img").offset({top:100 left:200})

    获取图片高度

    var w= $("img").width();
    var w= $("img").height();

    设置图片的高度

    var w = $("img").width(222);
    var x  = $("img").height(200);

    8.向上下滑动,按下按钮菜单下拉

    $(“:button”).click(function(){
       $(“div”). slideToggle(200);
    });

    总结:

    jQuery的API

    each():是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象
            append():追加到父元素之后
            prepend():追加到父元素之前
    after():追加到兄弟元素之后
            before():追加到兄弟元素之前 
    attr(name):获取属性值
            attr(name,value):给符合条件的标签添加key-value属性对 
    $("<div id='xxID'>HTML代码</div>"):创建元素,属性,文本    
            remove():删除自已及其后代节点  
    val():获取value属性的值
            val(""):设置value属性值为""空串,相当于清空
            text():获取HTML或XML标签之间的值
            text(""):设置HTML或XML标签之间的值为""空串 
    clone():只复制样式,不复制行为
            clone(true):既复制样式,又复制行为
    replaceWith():替代原来的节点
            removeAttr():删除已存在的属性
    addClass():增加已存在的样式
            removeClass():删除已存在的样式
            hasClass():判断标签是否有指定的样式,true表示有样式,false表示无样式
            toggleClass():如果标签有样式就删除,否则增加样式
    offset():获取对象的left和top坐标
            offset({top:100,left:200}):将对象直接定位到指定的left和top坐标
    width():获取对象的宽
            width(300):设置对象的宽
            height():获取对象的高
            height(500):设置对象的高
    children():只查询子节点,不含后代节点
            next():下一下兄弟节点
            prev():上一下兄弟节点
            siblings():上下兄弟节点
    show():显示对象
            hide():隐藏对象
    fadeIn():淡入显示对象
            fadeOut():淡出隐藏对象
    slideUp():向上滑动
            slideDown():向下滑动
            slideToggle():上下切换滑动,速度快点
  • 相关阅读:
    Python中if __name__ == '__main__' 的作用和原理
    ajax请求参数为中文乱码的情况
    表单提交---前端页面模拟表单提交(form)
    mysql中函数DISTINCT,group by,CONCAT及GROUP_CONCAT的使用
    Java的反射机制及应用实例
    Java中的IO学习总结
    Form表单提交
    Java中equals和==的区别
    Java的String&StringBuffer&StringBuilder
    Java的Date类与Calendar类
  • 原文地址:https://www.cnblogs.com/kw28188151/p/8312950.html
Copyright © 2011-2022 走看看