【前端10】jquary

其他 2021-01-25 07:14:44 阅读次数: 0

文章目录

1.jquery框架引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <script>
        var $ = function (id) {  //$就是method01()
            id = id.substring(1) //因为传入的id为#mydiv，切割字符串
            var element = document.getElementById(id);
            return element
        }
    </script> -->

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111-->   
    <script src="../js/nb.js"></script>   <!-- js有两种引入方式：内部或外部 -->
    <!-- nb.js里写var $ = function (id)...没有<script>..</script> -->
    <script>
        window.onload = function (ev) {
     
     
            // var div = document.getElementById("mydiv"); //代码冗余
            // var div = $("mydiv"); // 代码简单, 阅读性太差
            var div = $("#mydiv"); // #代表id选择器，兼顾阅读性和简洁，效果同上行，但要切割字符串
            div.innerText = "xx5"
        }
    </script>
</head>
<body>
        <div id="mydiv">
        </div>
</body>
</html>

//nb.js
var $ = function (id) {
    
    
    id = id.substring(1)
    var element = document.getElementById(id);
    return element
}

2.jquery版本

jquery主要作用是简化js的dom树操作，轻量级不是看大小，看耦合度。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        jquery使用：1. 在项目中js文件夹导入js文件。 2. 在html导入js文件
 
        版本: 带min的 : 发布版(生产版) 阅读性差,文件很小()
                 不带 : 开发版(阅读性好,文件比较大) 
    -->
    <script src="../js/jquery-3.3.1.js"></script>
   <!-- <script src="../js/jquery-3.3.1.min.js"></script>-->
    <script>
        window.onload = function (ev) {
     
     
            $("#myid").text("嘻嘻")
        }
    </script>
</head>
<body>
        <div id="myid"></div>
</body>
</html>

在这里插入图片描述

3.jquery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
        /*
        *   jquery对象
        *       1. 定义: jquery框架中的api获取的对象
        *       2. 语法:  $("选择器")  如下面$("#myid")
        *                 $(js对象)  如下面$(div)
        *
        *       3. 本质: 对js来说, jquery对象是一个数组。jquery对象不能直接调用js的api如.innerText
        * 
        *       总结:  jquery对象 :  访问索引 -> js对象
        *                  js对象 :  $(js对象) -> jquery对象
        * */
        window.onload = function (ev) {
     
     
            $("#myid").text("嘻嘻")  //这个数组只有一个元素  //api底层: 遍历 + innerText            
            $(".myclass").text("呼呼")  //这个数组有两个元素
            $("#myid")[0].innerText = "哈哈" //数组这样才能innerText
            
            /*for(var i=0;i<$(".myclass").length; i++){
                $(".myclass")[i].innerText = "啦啦"
            }*/
                        
            var div = document.getElementById("myid2"); // js对象
            $(div).text("呼呼2") // js对象 - > jquery对象
        }
    </script>
</head>
<body>
        <div id="myid"></div>
        <div id="myid2"></div>
        <div class="myclass"></div>
        <div class="myclass"></div>
</body>
</html>

4.jquery的页面加载事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
        window.onload = function (ev) {
     
     
            $("#myid").text("嘻嘻")
        }
    </script>

<!--1111111111111111111111111111111111111111111111111111111111111111111111-->
    <script> 
       //jquery页面加载事件  $(fn) : fn  完整版写法如下：    
       /*  var method01 = function () { 
            $("#myid2").text("嘻嘻2")
        }
        $(method01)*/

        $(function () {
     
       //将这行 $ 想象成 window.onload =
            $("#myid2").text("嘻嘻2")
        })
    </script>
</head>
<body>
        <div id="myid"></div>
        <div id="myid2"></div>
        <div id="myid3"></div>
</body>
</html>

在这里插入图片描述

5.jquery基本选择器引入

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>01-基本选择器.html</title> 
 <script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
<!-- <script src="./script/assist.js" type="text/javascript"></script>-->  <!--这行动画--> 
 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 
 
 <script type="text/javascript">
     $(function () {
     
      // jquery的页面加载事件
     /*  document.getElementById("btn1").onclick = function (ev) {
             document.getElementById("one").style.backgroundColor = "red"
         }*/
     /*
     *  jquery对象: $("选择器")，以下为对象的API：
     *  click(fn) : jquery的点击事件注册  (底层：遍历 + onclick)
     *  text(value) : 遍历+ innerText
     *  css(key,value) : 遍历+ key=css属性 value=值  
     */
        $("#btn1").click(function () {
     
     
            $("#one").css("backgroundColor","green")
        })
        /*
         * 基本  #id
                element 标签选择器
                .class  类选择器
                *       所有，整个页面
                selector1,selector2,selectorN  组合(用逗号隔开是并集，用空格隔开是层集)
         */
         $("#btn2").click(function () {
     
     
             $(".mini").css("backgroundColor","red")
         })

         $("#btn3").click(function () {
     
     
             $("div").css("backgroundColor","red")
         })

         $("#btn4").click(function () {
     
     
             $("*").css("backgroundColor","red")
         })

         $("#btn5").click(function () {
     
     
             $("span,#two").css("backgroundColor","red")  //并集
         })
     })
  </script>

<!--11111111111111111111111111111111111111111111111111111111111111111111111111111111--> 
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 <h3>基本选择器.</h3> 
 <!-- 控制按钮 -->
  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
  <br /><br />  
<!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

  <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>

  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>
  
  <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

在这里插入图片描述

6.层级选择器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>02-层次选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
  <script type="text/javascript">
      /*
      * 层级：ancestor descendant
                 祖先    后代 (多级: 一级子标签, 二级)
             parent > child
                父母> 子女 (单级，只隔一代)
             prev + next : 前一个+后一个 (平级)
             prev ~ siblings : 前一个 ~ 平级 (siblings兄弟姐妹)
      */
      $(function () {
     
     
          $("#btn1").click(function () {
     
     
              $("body div").css("backgroundColor","red") //连小方框都选中
          })

          $("#btn2").click(function () {
     
     
              $("body>div").css("backgroundColor","red") //小方框没选中
          })

          $("#btn3").click(function () {
     
     
              $("#one+div").css("backgroundColor","red")
          })

          $("#btn4").click(function () {
     
     
              $("#two~div").css("backgroundColor","red")
          })
      })
  </script>

<!--11111111111111111111111111111111111111111111111111111111111111111111111111111--> 
</head>
<body>
  <h3>层次选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
  <h3>常见选择器</h3>
  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>   
  <h3>扩展选择器</h3>
  <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
  <input type="button" value="选择 id为two的元素的所有div兄弟元素." id="btn4"/>
  <br />
  <br />  
   <!-- 测试的元素 -->
  <div class="one" id="one" >
   id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

  <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>

  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

在这里插入图片描述

7.属性选择器

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>03-属性选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
 <script type="text/javascript">
     /*
        [attribute]  : 包含某个属性
        [attribute=value]  : 不仅包含,还得值=
        [attribute!=value]  :  上面结果取反(1.包含但是值!=   2.没有这个属性)
        [attribute^=value]  :  以...开头
        [attribute$=value]  : 以什么结尾
        [attribute*=value] :  包含,value中所有东西，attribute都包含
        [attrSel1][attrSel2][attrSelN]  组合属性(与：不仅满足A条件，还要满足B条件)
     */
     $(function () {
     
     
         $("#btn1").click(function () {
     
     
             $("div[title]").css("backgroundColor","red")
         })
         $("#btn2").click(function () {
     
     
             $("div[title='test']").css("backgroundColor","red")
         })
         $("#btn3").click(function () {
     
     
             $("div[title!='test']").css("backgroundColor","red")
         })
         $("#btn4").click(function () {
     
     
             $("div[title^='te']").css("backgroundColor","red")
         })
         $("#btn5").click(function () {
     
     
             $("div[title$='est']").css("backgroundColor","red")
         })
         $("#btn6").click(function () {
     
     
             $("div[title*='es']").css("backgroundColor","red")
         })
         $("#btn7").click(function () {
     
     
             $("div[id][title*='es']").css("backgroundColor","red")
         })
     })
  </script>

<!--1111111111111111111111111111111111111111111111111111111111111111111111111111111111-->
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>	
  
    <h3> 属性选择器.</h3>
	<h3>常见选择器</h3>
  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
  <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
    
  <h3>扩展选择器</h3>
  <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
  <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
  <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
  <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
  
	<br /><br />
   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>

  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>
  
  <span id="mover">正在执行动画的span元素.</span>
</body>
</html>

在这里插入图片描述
B站/知乎/微信公众号：码农编程录
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43435675/article/details/108565968
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022