• jquery 基础


    1. 选择器  --------  没有空格表示且,逗号表示和(或),空格表示后代(层级关系),〉表示孩子

        PS:$可以接受2个参数,第二个参数是目标jquery对象,例如:$("p",$(document.getElementById("my_id")));

       一般只要会单选就行了,其他的其实没有必要掌握

       单选

       $("p")       选择所有p元素

       $(".ty1")    选择所有class="ty1"的元素

       $("#fq1")  选择id="fq1"的元素

       联合选【不带空格为联合选,即同时满足;带空格表示后代】

       $("p.foo")   选择类型为p且class="foo" 的元素     注意 有空格没空格完全不同,空格表示其后代咯

       $(".qq#div1")  选择class为qq,且id为div1的元素       注意 有空格没空格完全不同

       组合选

       $("p.foo,#bar) 选择class为foo的锻炼(p)  和id为bar的元素,注意逗号的隔断是((p.foo),(#bar))

       层级

       $("body .fsl")选择body元素内,所有的class="fsl"的元素(所有的后代,哪怕有嵌套的都适用)

       $("div>.fqq")选择div元素内的直接自元素为class="fqq"的元素(>>表示隔2代的元素,>>>表示隔三代的元素.....依次类推,一般不用哦)

       过滤器

        $(".c1:first")选择class="c1"中的所有元素的第一个    同$(".c1").first()   

        $(".c1:last")选择class="c1"中的所有元素的最后一个        同$(".c1").last()   

        $(".c1:parent")选择class="c1"中的所有元素的父元素

        $(".c1").eq(3);  找第3个元素(起始为0)

        $(".c1[title=abc]")找出属性title为abc的c1元素,【属性过滤器】

        $('[name=items]:checkbox')name属性为items,且type为checkbox的元素。

        $('#id_form input:[name=username]')form表单下,name为username的input元素

        找子 元素

        $(".c1").children();所有子元素

        $(".c1").children(".foo")找class=foo 的子元素

        找父元素

        $(".c1").closest("p");找最近的一级 符合条件的父元素。

        $(".c1").parent();

    2. 添加删除之类的  --------  没有空格表示且,逗号表示和(或),空格表示后代(层级关系),〉表示孩子

       $(".c1").append("a");//在</a>之前添加,添加在原来数据尾部。   orgin a

       $(".c1").prepend("b");//在<a>之后添加,添加在原来数据头部。    b orgin a

       $(".c1").before("be");//在<a>之前添加,添加在元素之前                 be <a class="c1">b orgin b</a>

       $(".c1").after("af");//在</a>之后添加,添加在元素之后                 be <a class="c1">b orgin b</a>af

       $(".c1").wrap("<strong>");//对选中的元素,用<strong>包裹    <strong>  <strong /> <strong></strong>三者皆可,语法宽松

       $....wrap ....wrapAll...wrapInner等     wrap系列的用法,直接百度搜索,感觉用的不多.

       $(".c1").remove();整个删除  里面的内容和标签全部删掉

       $(".c1").detach();整个删除  里面的内容和标签全部删掉,与remove不同的是 detach()还会返回所有被删除的内容,一般用来做复制到其他地方的作用。

         

       在body最开始添加一个自定义的<p>

      var para = $("<p>",{

                           "class":"c1",

                           "text":"hello ,I am jack",

                           "css":{"background":"yellow"}

                         }

                  );

      $("body").prepend(para);

      

    3. 修改属性   -------   attr();
       第一个参数给出所要修改的属性,第二个参数给定属性值,如果没有第二个参数,则返回该属性的值
       $("#id1").attr("class");  获取class属性值
       $("#id1").attr("type");  获取style属性值
     

       $("#id1").attr("class","ff0");  修改class属性为ff0

       $("#id1").attr("value","new value");  修改value属性为new value

     
       $("#id1").css({"color":"red","background":"yellow"});//修改样式
       $("#id1").css({”color“);//获取样式
       $("#id1").text();         $("#id1").text();            //修改或者获取内容
       $("#id1").html();       $("#id1").html("acb");  //修改或者获取内容
       $("#id1").val();          $("#id1").val("qqt");    //修改或者获取value,同$("#id").attr("value","aa");
       $("#id1").data("mydefinevalue");        $("#id1").data("mydefinevalue","mmmnnn");//修改或者获取一个自定义的属性
       $("#id1").addClass("intro");    removeClass("intro");   toggleClass("intro");   //增加或者删除元素的class
       $("#id1").height();          $("#id1").height(120);    //设置或者获取长度高度
        
    4. 遍历
      $(".p1").each(function(index,ele){ 
    $(this).append($(this).html()); //$(this)就表示当前jquery元素,可以使用$(this).attr("value","v1");
    //ele 表示当前js元素,可以使用ele.innerHTML="v1";
    });
      

    5. 显示 和隐藏

       $("#id1").show();  //显示  不带效果

       $("#id2").hide();   //隐藏   不带效果

       $("#id1").show(2000,function(){});  //显示  带效果,在一定时间内慢慢显示

       $("#id2").hide(2000,function(){});   //隐藏   带效果,在一定时间内慢慢消失

       $("#id1").fadeIn();  //慢慢显示,色度有0->1

       $("#id2").fadeOut();   //慢慢隐藏,色度有1->0

     

       $("#id1").fadeIn(2000,function(){});  //慢慢显示,色度有0->1

       $("#id2").fadeOut(2000,function(){});   //慢慢隐藏,色度有1->0

       $("#id1").fadeTo(2000,0.5,function(){});  //慢慢到0.5的程度

       $("#id1").slideUp(2000,function(){});  //慢慢隐藏,高度变化

       $("#id2").slideDown(2000,function(){});   //慢慢显示,高度变化

       $("#id2").slideToggle(2000,function(){});   //

     
    6.  animate delay 用的不多   animate 设定到指定的格式
       $("#img1").animate({"width":"10px","height":"100px"},20,"swing",function(){}).delay(1000).animate({"width":"400px","height":"100px"},20,"swing",function(){});
     
     $("p").animate({left:"100px"});//
       

    7. 处理事件行为 ready,click等。

    $(document).ready(function(){ //等DOM都准备好之后,才执行
        $("#click_send_img").click(function(){//按钮的事件
            $("#div_send_img").toggle();
            $("#div_send_msg").toggle();
        });
        $("#XXX").focus(function(){//获得焦点
        });
        $("#XXX").blur(function(){//失去焦点
        });
        //也可以
        $("#XXX").bind("click",function(){
            //XXXXX
        });

        //停止事件冒泡,阻止默认行为

        $("#XXX").click(function(event){
            event.stopPropagation();//停止事件冒泡
            event.preventDefalut();//阻止默认行为,如链接、表单提交。链接返回false也能阻止跳转。
        });

    });

        也可以简写成
        $(function(){
          //xxxx do job.
        });

       

    8. DOM对象和jquery对象严格区分

     

    jquery转dom:

    var $cr = $("#cr");//jquery对象

    var cr = $cr[0];//dom对象

    或者//var cr = $cr.get(0);//dom对象 

     
    dom转jquery
    var cr = document.getElementById("cr");//dom对象
    var $cr = $(cr);//jquery对象。 
     
     

    9. jquery的常用插件

    $(document).ready(function(){ //等DOM都准备好之后,才执行

    (1)validation插件

          可以验证email,url,phonte,idCard等。

    (2)表单插件Form:jquery.form.js

          不需要复杂得去拼接ajax中的data字段,尤其对提交文件效果非常好

    (3)模态对话框,simplemodal

          避免丑陋的alert对话框。

    (4)cookie插件。jquery.cookie.js

            $.cookie('token', response.data, { expires:365*100,path: '/'  });//域名下所有路径

            $.cookie('token', response.data, { expires:365*100,path: 'taobao.com'  });//该域名下所有路径

            $.cookie('token', response.data, { expires:365*100,path: '.taobao.com'  });//该二级域名下所有路径

            var c = $.cookie('token');//获得cookie

     (5)query插件。jquery.query-2.1.7.js。

          操作url,$.query.get("type");

  • 相关阅读:
    算法作业10——0-1装载问题(背包问题)
    算法作业9-1——最长公共子序列问题
    算法作业9-2——背包问题
    算法作业7——投资问题
    算法作业6——选第k小的元素:特定分治策略
    【Java并发编程】并发编程大合集
    Redis学习笔记-Redis内部数据结构
    近期的随笔
    2013年的总结,比以往时候来得晚了一些
    探索推荐引擎内部的秘密,第 3 部分: 深入推荐引擎相关算法
  • 原文地址:https://www.cnblogs.com/dongfangchun/p/8441034.html
Copyright © 2020-2023  润新知