• jquery


    什么是jquery

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

    什么是jquery对象

    jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的如果一个对象是 jQuery 对象那么它就可以使用 jQuery 里的方法: $(“#test”).html();

    jquery的基础语法

    1  $(selector).action()  

    举个栗子

    $("#test").html() 
       
             意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
    
             这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 
    
             虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
    
             约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
    
    var $variable = jQuery 对象
    var variable = DOM 对象
    
    $variable[0]:jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

    选择器

    基本选择器

    $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div") 相当于js的document.get系列 jquery获取出来的会是一个集合,后面无论是什么操作,都会进行内部循环。

     

    <body>
    <p class="c1">p1</p>
    <p class="c1">p2</p>
    <p class="c1" id="d1">p3</p>
    
     <script>
          $("#d1").css("color","red")//jquery获取的结果为集合
          $(".c1").css("color","red")//无论后面做什么操作,都会循环集合内的对象
    $("p").css("color","blue")//能拿到所有3个标签
          $("#d1,div").css("color","green")//d1或div </script> </body>

    层级选择器

    $(".outer div") //class为outer的后代为div的标签
    $(".outer>div") //class为outer的子代为div的
    $(".outer+div") //class为outer的邻居为div的
    $(".outer~div") //class为outer的不挨着的兄弟

    基本选择器

    $("li:first")  //li的第一个标签
    $("li:last") //li的最后一个标签
    $("li:eq(2)") //第三个变红 $("li").eq(2)
    $("li:even") //奇数偶数
    $("li:gt(1)") //索引大于1

    属性选择器

    $("[属性名='值'][.....]")
    $('[id="div1"]') $('["alex="sb"][id]')

    表单选择器

    $("[type='text']").val("hello")----->$(":text").val("hello")         注意只适用于input标签  : $("input:checked")

    筛选器

    过滤筛选器   

    $("li").eq(2)  //第三个 相当于$("li":eq(2))适合变量
    $("li").first()
    $("ul li").hasclass("test") //判断有没有class等于test的 用于判断值为true,flase

    查找筛选器  

    查找子标签:         $("div").children(".test")  #只找儿子   $("div").find(".test") #找后代 只能针对性的取,find后不能为空
                                   
     向下查找兄弟标签:    $(".test").next()  #下一个相邻的兄弟标签           $(".test").nextAll()     #下面不包含自己的所有兄弟标签
                        $(".test").nextUntil(".test") #区间,从哪到哪,开区间
                               
     向上查找兄弟标签:    $("div").prev()  #上一个标签                $("div").prevAll() #上面所有标签      
                        $("div").prevUntil()   #区间
     查找所有兄弟标签:    $("div").siblings()  #所有的兄弟标签
                  
     查找父标签:         $(".test").parent() #找到第一个爹             $(".test").parents()     
                        $(".test").parentUntil() #指定查找叫什么名的爹

    操作元素

    事件

    页面载入

    ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    第一种
    $(function(){})
    第二种 $(document).ready(function(){}) -----------> $(function(){}) 整个页面加载完成,才会执行代码

    事件绑定

    //语法:  标签对象.事件(函数)    
    $("p").click(function(){
    $(this).html()//取值
    $(this).text()//取值
    $(this).html("hello world")//赋值
    $(this).text("hello world")//赋值
    }) #包括了循环事件函数

    事件委派

    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处<ul>    <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <hr>
    <button id="add_li">Add_li</button>
    
    <script src="jquery.min.js"></script>
    <script>
        $("ul li").click(function(){
            alert(123)
        });
    
        $("#add_li").click(function(){
            var $ele=$("<li>");
            $ele.html("444);
            $("ul").append($ele)
    
        });
      
    //给ul下的li标签委派事件。
    $("ul").on("click","li",function(){ alert(456) }) </script>

    事件切换

    hover事件:

    一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。

    over:鼠标移到元素上要触发的函数

    out:鼠标移出元素要触发的函数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .test{
    
                 200px;
                height: 200px;
                background-color: wheat;
    
            }
        </style>
    </head>
    <body>
    
    
    <div class="test"></div>
    </body>
    <script src="jquery.min.js"></script>
    <script>
    //    function enter(){
    //        console.log("enter")
    //    }
    //    function out(){
    //        console.log("out")
    //    }
    // $(".test").hover(enter,out)
    
    
    $(".test").mouseenter(function(){
            console.log("enter")
    });
    
    $(".test").mouseleave(function(){
            console.log("leave")
        });
    
    </script>
    </html>

    属性操作

    --------------------------CSS类
    $("").addClass(class|fn)//相当于classList.add
    $("").removeClass([class|fn])//相当于classList.remove
    
    --------------------------属性
    $("").attr(属性名);不加属性名是取值,加属性名是赋值 :$("p").attr("class","c1")可以替换addclass
    $("").removeAttr();
    $("").prop();
    $("").removeProp();
    
    --------------------------HTML代码/文本/值
    $("").html([val|fn])
    $("").text([val|fn])
    $("").val([val|fn|arr])

    val只有 text,textarea,select使用
    --------------------------- $("#c1").css({"color":"red","fontSize":"35px"})

    alert方法的使用

    <input id="chk1" type="checkbox" />是否可见
    <input id="chk2" type="checkbox" checked="checked" />是否可见
    
    
    
    <script>
    
    //对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
    //对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
    //像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此
    //需要使用prop方法去操作才能获得正确的结果。
    
    
    //    $("#chk1").attr("checked")
    //    undefined
    //    $("#chk1").prop("checked")
    //    false
    
    //  ---------手动选中的时候attr()获得到没有意义的undefined-----------
    //    $("#chk1").attr("checked")
    //    undefined
    //    $("#chk1").prop("checked")
    //    true
    
        console.log($("#chk1").prop("checked"));//false
        console.log($("#chk2").prop("checked"));//true
        console.log($("#chk1").attr("checked"));//undefined
        console.log($("#chk2").attr("checked"));//checked
    </script>

    each循环

    是将css操作加到所有的标签上,内部维持一个循环;但如果对于选中标签进行不同处理,这时就需要对所有标签数组进行循环遍历啦

    方式一

    格式:$.each(obj,fn)
    
    li=[10,20,30,40];
    dic={name:"yuan",sex:"male"};
    $.each(li,function(i,x){
        console.log(i,x)
    });//i是索引,x是值

    方式二

    格式:$("").each(fn)

    $("tr").each(function(){
        console.log($(this).html())
    })

    其中,$(this)代指当前循环标签。

    节点操作

    //创建一个标签对象
        $("<p>")
      var $img = $("<img>") 设置属性 $img.attr({"src":"egon.jpg","width":100,"height":100})   插入 $(".c1").append($img)
    插入另一种 $img.appendTo($(".c1"))
    //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");父节点添加子节点 $("").appendTo(content) ----->$("p").appendTo("div");子节点被父节点添加 $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");上边 $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");兄弟层插入 $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty()//清空标签里面内容 $("").remove([expr])//$("h3").remove() //复制 $("").clone([Even[,deepEven]])
    复制例子:
    var c=$("h3").clone();
    $(".c1").append(c)

    动画效果

    $("p").show(1000)//显示,参数为多少毫秒
    $("p").hide(500)//隐藏
    $("p").toggle(1000)//切换隐藏与显示,相当于隐藏显示做了个判断
    
    //淡入淡出
    $("p").fadeIn()//淡入
    $("p").fadeOut()//淡出
    $("p").fadeToggle()//淡切

    css操作

    css位置操作

    $("").offset([coordinates])//偏移量,获取元素位置,参照物为可视窗口
    $("").position()//参照物为有定位的父元素
    $("").scrollTop([val])
    $("").scrollLeft([val])
    //实例1
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .test1{ 200px; height: 200px; background-color: wheat; } </style> </head> <body> <h1>this is offset</h1> <div class="test1"></div> <p></p> <button>change</button> </body> <script src="jquery-3.1.1.js"></script> <script> var $offset=$(".test1").offset();//获取偏移量 var lefts=$offset.left;//获取左边距 var tops=$offset.top;//获取上边距 $("p").text("Top:"+tops+" Left:"+lefts); $("button").click(function(){ $(".test1").offset({left:200,top:400})//改变偏移位置 }) </script> </html>
    //实例2
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; } .box1{ 200px; height: 200px; background-color: rebeccapurple; } .box2{ 200px; height: 200px; background-color: darkcyan; } .parent_box{ position: relative; } </style> </head> <body> <div class="box1"></div> <div class="parent_box"> <div class="box2"></div> </div> <p></p> <script src="jquery-3.1.1.js"></script> <script> var $position=$(".box2").position(); var $left=$position.left; var $top=$position.top; $("p").text("TOP:"+$top+"LEFT"+$left) </script> </body> </html>
    实例3
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <style>
            body{
                margin: 0;
            }
            .returnTop{
                height: 60px;
                 100px;
                background-color: peru;
                position: fixed;
                right: 0;
                bottom: 0;
                color: white;
                line-height: 60px;
                text-align: center;
            }
            .div1{
                background-color: wheat;
                font-size: 5px;
                overflow: auto;
                 500px;
                height: 200px;
            }
            .div2{
                background-color: darkgrey;
                height: 2400px;
            }
    
    
            .hide{
                display: none;
            }
        </style>
    </head>
    <body>
         <div class="div1 div">
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
               <h1>hello</h1>
         </div>
         <div class="div2 div"></div>
         <div class="returnTop hide">返回顶部</div>
    
     <script src="jquery-3.1.1.js"></script>
        <script>
             $(window).scroll(function(){
                 var current=$(window).scrollTop();
                  console.log(current);
                  if (current>100){
    
                      $(".returnTop").removeClass("hide")
                  }
                  else {
                  $(".returnTop").addClass("hide")
              }
             });
    
    
                $(".returnTop").click(function(){
                    $(window).scrollTop(0)
                });
    
    
        </script>
    </body>
    </html>

    尺寸操作

      $("").height([val|fn])
      $("").width([val|fn])
      $("").innerHeight()
      $("").innerWidth()
      $("").outerHeight([soptions])
      $("").outerWidth([options])
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                margin: 0;
            }
            .box1{
                 200px;
                height: 200px;
                background-color: wheat;
                padding: 50px;
                border: 50px solid rebeccapurple;
                margin: 50px;
            }
    
        </style>
    </head>
    <body>
    
    
    
    
    <div class="box1">
        DIVDIDVIDIV
    </div>
    
    
    <p></p>
    
    <script src="jquery-3.1.1.js"></script>
    <script>
        var $height=$(".box1").height();
        var $innerHeight=$(".box1").innerHeight();
        var $outerHeight=$(".box1").outerHeight();
        var $margin=$(".box1").outerHeight(true);
    
        $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
    </script>
    </body>
    </html>
  • 相关阅读:
    eclipse 批量 查询 替换
    Hibernate包及相关工具包下载地址
    逻辑运算符&& 用法解释
    主流数据库查找前几条数据的区别
    .propertie文件注释
    java.io.EOFException java.io.ObjectInputStream$PeekInputStream.readFully 错误
    数据库的名称尽量要以英文开头,如果全部输数字的话可能会出错的
    **和*的区别
    puTTY与SecureCRT的比较
    Windows下Redis的安装使用
  • 原文地址:https://www.cnblogs.com/kunixiwa/p/7736236.html
Copyright © 2020-2023  润新知