• jQuery 日常笔记


    1.$(document).read(function(){
    $('p').click(function(){
     $('p').hide();
    })
    })

    2.jquery是客户端脚本

    3.$("p").css("bckground","red");

    4.$(“div.intro”)  选取的是class是intro 的所有div 元素

    5.

    $("p:first")                  选取第一个 <p> 元素     
    $("ul li:first")          选取第一个 <ul> 元素的第一个 <li> 元素     
    $("ul li:first-child")          选取每个 <ul> 元素的第一个 <li> 元素     
    $("[href]")                  选取带有 href 属性的元素     
    $("a[target='_blank']")      选取所有 target 属性值等于 "_blank" 的 <a> 元素     
    $("a[target!='_blank']")     选取所有 target 属性值不等于 "_blank" 的 <a> 元素     
    $(":button")                  选取所有 type="button" 的 <input> 元素 和 <button> 元素     
    $("tr:even")                  选取偶数位置的 <tr> 元素     
    $("tr:odd")                  选取奇数位置的 <tr> 元素
    $("#p")
    $(".p")
    $("p")
    $(this)

    6.
      鼠标事件
      click()
      dbclick()  双击事件
      mouseenter()   鼠标放上
      monseleave()  鼠标离开
      hover()   鼠标接触
     
     键盘事件
      keypress()  按键按下的过程
      keydown()  键按下
      keyup()      按键离开             


      表单事件
      submit()    递交表单时
      change()    表单变化
      focus()    
      blur()

     文档/窗口事件
     
     load()   加载
     resize()  调整页面的尺寸时触发
     scroll()   当用户滚动指定的元素时发生scroll().事件适用于所有可滚动的元素和window对象。
     unload()  在jquery1.8中已经废除。离开页面时触发
     注意:使用时$(selector).load()

     
    7.jquery效果
      hide()   举例 渐变   $('p').hide(1000,"linear",function(){})  
      show()
      toggle() 切换显示隐藏
    8.
      fadeIn()淡入
      fadOut()淡出
      fadToggle()淡入淡出切换

     注:里面可以注入参数  slow、fast 或者是毫秒。如 fadIn(1000)或fadIn("slow")
     
     fadTo()颜色的淡化      例如:fadTo("slow",0.4) //0.4是颜色的透明度
     
    9.slideDown()  
      slideUp()
      slideToggle()
    注:里面可以注入参数  slow、fast 或者是毫秒

    10.text() 、html() 、val()

     11.获取属性的值  attr()   例如:$("#p").attr("href")

       attr()的回调方法‘’
       举例:
         
         $("button").click(function(){
            $("#runoob").attr("href", function(i,origValue){
             return origValue + "/jquery";
          });
       });

    12.
        append() - 在被选元素的结尾插入内容
        prepend() - 在被选元素的开头插入内容
        after() - 在被选元素之后插入内容
        before() - 在被选元素之前插入内容

    13.删除
      remove()  //删除被选元素和其子元素     $("#at").remove(".italic")
      empty()   //删除被选元素的所有子元素
    14.增加、删除class样式

      addClass()
      removeClass()                         
      toggleClass() 切换增加删除操作
      举例:$("h1,h2,p").removeClass("blue important");

    15.向上遍历
    parent() 方法返回被选元素的直接父元素。
    parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
    parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。// $("span").parentsUntil("div");

    16.向下遍历
     children()  //children() 方法返回被选元素的所有直接子元素。
     find()   //$("div").find("span");


    17.水平遍历

        siblings()    //siblings() 方法返回被选元素的所有同胞元素。
        next()        //next() 方法返回被选元素的下一个同胞元素。
        nextAll()     //nextAll() 方法返回被选元素的所有跟随的同胞元素。  例如:$("h2").nextUntil("h6");
        nextUntil()   //nextAll() 方法返回被选元素的所有跟随的同胞元素。   $("h2").nextAll();
        prev()
        prevAll()
        prevUntil()

    18.过滤
       first() 方法返回被选元素的首个元素。
      last()   last() 方法返回被选元素的最后一个元素。
      eq() 方法返回被选元素中带有指定索引号的元素
      filter()。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。  //例如 $("p").filte(".url").css("backgroundcolor","yellow");

    19.ajax

    实例:
     $('#send').click(function(){
             $.ajax({
                 type: "GET",
                 url: "test.json",
                 data: {username:$("#username").val(), content:$("#content").val()},
                 dataType: "json",
                 success: function(data){
                             $('#resText').empty();   //清空resText里面的所有内容
                             var html = '';
                             $.each(data, function(commentIndex, comment){
                                   html += '<div class="comment"><h6>' + comment['username']
                                             + ':</h6><p class="para"' + comment['content']
                                             + '</p></div>';
                             });
                             $('#resText').html(html);
                          }
             });
        });



        
    21.Object.create()  创建对象
      案例: var person = Object.create(a);

    22.
    indexOf() 方法只返回查找到的第一个子字符串的起始下标值,如果没有找到则返回 -1。
    search() 方法和 indexOf() 的功能是相同的,查找指定字符串第一次出现的位置
    indexOf(str,start)  str 指的是查询的字符串,start 查询开始的索引值。包含第一个索引的值
                         结果为开始索引值到结束第一次出现某个字符串的索引值

    23.
     setTimeout(code,millisec)  参数:code指的是需要执行的方法或函数,milllisec 指的是时间间隔。
     setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用。
     clearTimeout()方法可以取消setTimeout() 方法设置的 timeout。

    24.
      Array.form() 方法用于将集合转化为数组
       例如: 数组去重
           function a(arr){ return Array.from(new Set(arr));}
     
    25.Object.defineProperty(a, mySymbol, { value: 'Hello!' });

    26.Symbol

    27.json数据转换为对象
       json.parse()
       json对象转换为字符串:  json.stringfy()

    28.Object.keys(Obj)  
         参数:要返回其枚举自身属性的对象  
         返回值:一个表示定对象的所有可以枚举的字符串数组
      举例:
        1.处理对象
          let person = {name:"张三",age:25,address:"深圳",getName:function(){}}
          Object.keys(person) // ["name", "age", "address","getName"]
        2.处理数组
          let arr = [1,2,3,4,5,6]
          Object.keys(arr) // ["0", "1", "2", "3", "4", "5"]
        3.处理字符串
          let str = "saasd字符串"
          Object.keys(str) // ["0", "1", "2", "3", "4", "5", "6", "7"]


  • 相关阅读:
    使用URLEncoder、URLDecoder进行URL参数的转码与解码
    js中的连等==和全等===
    sass用法
    sass/scss 和 less的区别
    JSON与localStorage的爱恨情仇
    ionic2
    雪碧图
    JavaScript交换两个变量值的七种解决方案
    JavaScript中的[]和{}
    为什么 ++[[]][+[]]+[+[]] = 10?
  • 原文地址:https://www.cnblogs.com/911sky/p/14188702.html
Copyright © 2020-2023  润新知