前端框架之jQuery

发布时间：2023-09-06 02:02责任编辑：熊小新关键词：jQuery 前端框架前端

一 iQuery是什么

jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team

jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二什么是jQuery对象？

jQuery对象就是通过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 对象
varvariable = DOM 对象
$variable[0]：jquery对象转为dom对象   $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

使用时到官网下载保存（打开后按Ctrl+s可以保存），放到项目路径下引入

三寻找元素(选择器和筛选器)

3.1 选择器

3.1.1 基本选择器

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

3.1.2 层级选择器

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

3.1.3 基本筛选器

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

3.1.4属性选择器

$(‘[]‘)

3.1.5 表单选择器

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

实例之左侧菜单

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>left_menu</title>

 <style>
    .menu{
      height:500px;
      width:30%;
      background-color: gainsboro;
      float: left;
    }
    .content{
      height:500px;
      width:70%;
      background-color: rebeccapurple;
      float: left;
    }
   .title{
     line-height:50px;
     background-color:#425a66;
     color: forestgreen;}
   .hide{
     display: none;
    }
 </style>
</head>
<body>

<div>
 <div>
   <div>
     <div>菜单一</div>
     <div>
       <div>111</div>
       <div>111</div>
       <div>111</div>
     </div>
   </div>
   <div>
     <div>菜单二</div>
     <div>
       <div>111</div>
       <div>111</div>
       <div>111</div>
     </div>
   </div>
   <div>
     <div>菜单三</div>
     <div>
       <div>111</div>
       <div>111</div>
       <div>111</div>
     </div>
   </div>

 </div>
 <div></div>

</div>
<scriptsrc="jquery-3.2.1.js"></script>
<script>
     $(".item .title").click(function(){
       $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

//        $(this).next().removeClass("hide");
//        $(this).parent().siblings().children(".con").addClass("hide");
     })
</script>
</body>
</html>

实例之tab切换

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>tab</title>
 <scriptsrc="jquery-3.3.1.min.js"></script>
 <script>
    functiontab(self){
      varindex=$(self).attr("xxx");
       $("#"+index).removeClass("hide").siblings().addClass("hide");
       $(self).addClass("current").siblings().removeClass("current");

     }
 </script>
 <style>
   *{
     
     
   }
   .tab_outer{
     margin:0pxauto;
     width:60%;
   }
   .menu{
     background-color:#cccccc;
     /*border: 1px solid red;*/
     line-height:40px;
   }
   .menuli{
     display: inline-block;
   }
   .menua{
     border-right:1pxsolid red;
     padding:11px;
   }
   .content{
     background-color: tan;
     border:1pxsolid green;
     height:300px;
   }
   .hide{
     display: none;
   }

   .current{
     background-color: darkgray;
     color: yellow;
     border-top: solid2pxrebeccapurple;
   }
 </style>
</head>
<body>
  <div>
    <ul>
      <lixxx="c1">菜单一</li>
      <lixxx="c2">菜单二</li>
      <lixxx="c3">菜单三</li>
    </ul>
    <div>
      <div>内容一</div>
      <div>内容二</div>
      <div>内容三</div>
    </div>

  </div>
</body>
</html>

3.2 筛选器

3.2.1过滤筛选器

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

3.2.2查找筛选器

$("div").children(".test")   $("div").find(".test")               
$(".test").next()  $(".test").nextAll()  $(".test").nextUntil()             
$("div").prev() $("div").prevAll() $("div").prevUntil()           
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()

四操作元素(属性，css，文档处理)

4.1 属性操作

--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

jQuery循环的两种方式

jquery循环的两种方式
方式一
li=[10,20,30,40]
dic={name:"yuan",sex:"male"}
$.each(li,function(i,x){
 console.log(i,x)
})

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

实例之全反选

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<scriptsrc="jquery-3.3.1.min.js"></script>
<script>
     functionselectall(){
       $("table :checkbox").prop("checked",true)
     }
     functioncancel(){
       $("table :checkbox").prop("checked",false)
     }
     functionreverse(){
       $("table :checkbox").each(function(){
         $(this).prop("checked",!$(this).prop("checked"));
       });
     }
</script>
</head>
<body>

 <button>全选</button>
 <button>取消</button>
 <button>反选</button>

 <tableborder="1">
   <tr>
     <td><inputtype="checkbox"></td>
     <td>111</td>
   </tr>
   <tr>
     <td><inputtype="checkbox"></td>
     <td>222</td>
   </tr>
   <tr>
     <td><inputtype="checkbox"></td>
     <td>333</td>
   </tr>
   <tr>
     <td><inputtype="checkbox"></td>
     <td>444</td>
   </tr>
 </table>
</body>
</html>

实例之模态对话框

<!DOCTYPE html>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>Title</title>
 <style>
   .back{
     background-color: rebeccapurple;
     height:2000px;
   }

   .shade{
     position: fixed;
     top:0;
     bottom:0;
     left:0;
     right:0;
     background-color: coral;
     opacity:0.4;
   }

   .hide{
     display: none;
   }

   .models{
     position: fixed;
     top:50%;
     left:50%;
     margin-left: -100px;
     
     height:200px;
     width:200px;
     background-color: gold;

   }
 </style>
</head>
<body>
<div>
 <inputtype="button"value="click">
</div>

<div></div>
<div>
 <inputtype="button"value="cancel">
</div>


<scriptsrc="jquery-3.3.1.min.js"></script>
<script>

 functionaction1(self){
   $(self).parent().siblings().removeClass("hide");

 }
 functionaction2(self){
   //$(self).parent().parent().children(".models,.shade").addClass("hide")
 $(self).parent().addClass("hide").prev().addClass("hide")
 }
</script>
</body>
</html>

4.2 文档处理

//创建一个标签对象
 $("<p>")
//内部插入
 $("").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])
//复制
 $("").clone([Even[,deepEven]])

4.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>
<htmllang="en">
<head>
 <metacharset="UTF-8">
 <title>Title</title>
 <scriptsrc="js/jquery-2.2.3.js"></script>
 <script>


    window.onscroll=function(){

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

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


    functionreturnTop(){
//        $(".div1").scrollTop(0);

       $(window).scrollTop(0)
     }




 </script>
 <style>
   body{
     
   }
   .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;
     
     overflow: auto;
     width:500px;
   }
   .div2{
     background-color: darkcyan;
   }
   .div3{
     background-color: aqua;
   }
   .div{
     height:300px;
   }
   .hide{
     display: none;
   }
 </style>
</head>
<body>
 <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></div>
 <div></div>
 <div>返回顶部</div>
</body>
</html>

识别图中二维码,领取python全套视频资料

前端框架之jQuery

原文地址：https://www.cnblogs.com/IT-Scavenger/p/9249407.html

前端框架之jQuery

二 什么是jQuery对象？

三寻找元素(选择器和筛选器)

3.1 选择器

3.2 筛选器

四 操作元素(属性，css，文档处理)

4.1 属性操作

知识推荐

二什么是jQuery对象？

四操作元素(属性，css，文档处理)