前段学习——jQuery

Posted liutianyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前段学习——jQuery相关的知识,希望对你有一定的参考价值。

一、什么是jQuery对象?

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

$("#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

 

二、寻找元素 (选择器和筛选器) 

2.1选择器:

2.1.1:基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

2.1.2:层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

2.1.3:基本筛选器  

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

2.1.4:属性选择器:

$(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)

2.1.5:表单选择器

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

  

2.2:筛选器

2.2.1:过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

2.2.2:查找筛选器

 $("div").children(".test")   // 找到类名为 "test" 的所有 div 的子元素  
 $("div").find(".test")        // 搜索所有段落中的后代 元素
  
                              
 $(".test").next()         // 获得匹配元素集合中每个元素紧邻的同胞元素
  $(".test").nextAll()    //获得匹配元素集合中每个元素的所有跟随的同胞元素
$(".test").nextUntil()  //获得每个元素所有跟随的同胞元素,但不包括被选择器、DOM 节点或已传递的 jQuery 对象匹配的元素
                    
       
 $("div").prev()          //获得匹配元素集合中每个元素紧邻的前一个同胞元素
 $("div").prevAll()      //获得当前匹配元素集合中每个元素的前面的同胞元素
 $("div").prevUntil()   //方法获得当前匹配元素集合中每个元素的前面的同胞元素
                        
 $(".test").parent()  //获得当前匹配元素集合中每个元素的父元素
$(".test").parents()  //获得当前匹配元素集合中每个元素的祖先元素
$(".test").parentUntil() // 获得当前匹配元素集合中每个元素的祖先元素

 $("div").siblings()  //获得匹配集合中每个元素的同胞

  

三、操作元素(属性,css,文档处理)

3.1:属性操作

--------------------------属性
$("").attr();   // 返回被选元素的属性值 可以用来操控属性
$("").removeAttr();//从被选元素中移除属性
$("").prop(property,value);方法设置或返回被选元素的属性和值
$("").removeProp();//会移除当前jQuery对象所匹配的每一个元素上指定名称的属性
--------------------------CSS类
$("").addClass(class|fn) //添加类名
$("").removeClass([class|fn]) //删除类名
--------------------------HTML代码/文本/值
$("").html([val|fn])  //返回或设置被选元素的内容,如果该方法未设置参数,则返回被选元素的当前内容
$("").text([val|fn])  //设置或返回被选元素的文本内容
$("").val([val|fn|arr]) //设置或返回当前所匹配元素的value值
---------------------------
$("").css("color","red")//方法返回或设置匹配的元素的一个或多个样式属性。

注意:

技术分享图片
<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>
attr 和 prop的注意事项

3.2:文档处理

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");//在被选元素的结尾(仍然在内部)插入指定内容。
    $("").appendTo(content)       ----->$("p").appendTo("div");//append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");//在被选元素的开头插入指定内容
    $("").prependTo(content)      ----->$("p").prependTo("#foo");//与prepend()方法作用相同。差异在于语法:内容和选择器的位置,以及 prepend() 能够使用函数来插入内容。

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");//在被选元素后插入指定的内容。
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");//在被选元素之前插入指定的内容。
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");//在被选元素之后插入 HTML 标记或已有的元素。
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");//在您指定的已有子节点之前插入新的子节点

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");//用指定的 HTML 内容或元素替换被选元素。

//删除

    $("").empty()  //从被选元素移除所有内容,包括所有文本和子节点。
    $("").remove([expr])//移除被选元素,包括所有文本和子节点。该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。

//复制

    $("").clone([Even[,deepEven]])//生成被选元素的副本,包含子节点、文本和属性。

3.3:css操作

CSS
        $("").css(name|pro|[,val|fn]) //返回或设置匹配的元素的一个或多个样式属性。
    位置
        $("").offset([coordinates]) //返回或设置匹配元素相对于文档的偏移(位置)
        $("").position()//返回匹配元素相对于父元素的位置(偏移)。
        $("").scrollTop([val]) //返回或设置匹配元素的滚动条的垂直位置。
        $("").scrollLeft([val])//返回或设置匹配元素的滚动条的水平位置。
    尺寸
        $("").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>
    <script src="js/jquery-2.2.3.js"></script>
    <script>


          window.onscroll=function(){

              var current=$(window).scrollTop();
              console.log(current)
              if (current>100){

                  $(".returnTop").removeClass("hide")
              }
              else {
              $(".returnTop").addClass("hide")
          }
          }


           function returnTop(){
//               $(".div1").scrollTop(0);

               $(window).scrollTop(0)
           }




    </script>
    <style>
        body{
            margin: 0px;
        }
        .returnTop{
            height: 60px;
            width: 100px;
            background-color: darkgray;
            position: fixed;
            right: 0;
            bottom: 0;
            color: greenyellow;
            line-height: 60px;
            text-align: center;
        }
        .div1{
            background-color: orchid;
            font-size: 5px;
            overflow: auto;
            width: 500px;
        }
        .div2{
            background-color: darkcyan;
        }
        .div3{
            background-color: aqua;
        }
        .div{
            height: 300px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
     <div class="div1 div">
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>
         <p>hello</p>

     </div>
     <div class="div2 div"></div>
     <div class="div3 div"></div>
     <div class="returnTop hide" onclick="returnTop();">返回顶部</div>
</body>
</html>
View Code

四、事件

页面载入
    ready(fn)  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
    $(document).ready(function(){}) -----------> $(function(){})

事件处理
    $("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。

    //  .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
    //  $(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);})就是筛选出ul下的li给其绑定
    //  click事件;

    [selector]参数的好处:
        好处在于.on方法为动态添加的元素也能绑上指定事件;如:

        //$(‘ul li‘).on(‘click‘, function(){console.log(‘click‘);})的绑定方式和
        //$(‘ul li‘).bind(‘click‘, function(){console.log(‘click‘);})一样;我通过js给ul添加了一个
        //li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新加的li是不会被绑上click事件的

        //但是用$(‘ul‘).on(‘click‘, ‘li‘, function(){console.log(‘click‘);}方式绑定,然后动态添加
        //li:$(‘ul‘).append(‘<li>js new li<li>‘);这个新生成的li被绑上了click事件
    
    [data]参数的调用:
             function myHandler(event) {
                alert(event.data.foo);
                }
             $("li").on("click", {foo: "bar"}, myHandler)

五、动画效果

显示隐藏

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>

$(document).ready(function() {
    $("#hide").click(function () {
        $("p").hide(1000);
    });
    $("#show").click(function () {
        $("p").show(1000);
    });

//用于切换被选元素的 hide() 与 show() 方法。
    $("#toggle").click(function () {
        $("p").toggle();
    });
})

    </script>
    <link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>


    <p>hello</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">切换</button>

</body>
</html>
View Code

滑动

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
     $("#slideDown").click(function(){
         $("#content").slideDown(1000);
     });
      $("#slideUp").click(function(){
         $("#content").slideUp(1000);
     });
      $("#slideToggle").click(function(){
         $("#content").slideToggle(1000);
     })
  });
    </script>
    <style>

        #content{
            text-align: center;
            background-color: lightblue;
            border:solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
</head>
<body>

    <div id="slideDown">出现</div>
    <div id="slideUp">隐藏</div>
    <div id="slideToggle">toggle</div>

    <div id="content">helloworld</div>

</body>
</html>
View Code

淡入淡出

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>
    <script>
    $(document).ready(function(){
   $("#in").click(function(){
       $("#id1").fadeIn(1000);


   });
    $("#out").click(function(){
       $("#id1").fadeOut(1000);

   });
    $("#toggle").click(function(){
       $("#id1").fadeToggle(1000);


   });
    $("#fadeto").click(function(){
       $("#id1").fadeTo(1000,0.4);

   });
});



    </script>

</head>
<body>
      <button id="in">fadein</button>
      <button id="out">fadeout</button>
      <button id="toggle">fadetoggle</button>
      <button id="fadeto">fadeto</button>

      <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>
View Code

回调函数

技术分享图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.4.min.js"></script>

</head>
<body>
  <button>hide</button>
  <p>helloworld helloworld helloworld</p>



 <script>
   $("button").click(function(){
       $("p").hide(1000,function(){
           alert($(this).html())
       })

   })
    </script>
</body>
</html>
View Code

 

以上是关于前段学习——jQuery的主要内容,如果未能解决你的问题,请参考以下文章

jQuery应用 代码片段

Visual Studio 2012-2019的130多个jQuery代码片段。

jQuery学习手册

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段(转)