前段学习——jQuery

时间：2018-10-15 20:42:36 阅读：175 评论：0 收藏：0 [点我收藏+]

一、什么是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

标签：ref lin eva 代码移除属性选择器 nbsp get code

原文地址：https://www.cnblogs.com/liutianyuan/p/9792737.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行