亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索

微信公眾號

首頁文章專題 AI工具學習編程手冊下載最近更新

文章 web3.0 后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架常見問題科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程自媒體新聞

專題后端開發(fā) web前端數(shù)據(jù)庫開發(fā)工具 php框架科技 Java 系統(tǒng)教程電腦教程硬件教程手機教程軟件教程游戲教程新聞

AI工具 AI 聊天問答 Agent智能體 AI 文本寫作 AI 繪畫作圖 AI 設計工具 AI 視頻創(chuàng)作 AI 音頻制作 AI 辦公學習 AI 編程開發(fā) Prompt指令

學習大前端后端開發(fā) 數(shù)據(jù)庫移動端運維開發(fā) UI設計計算機基礎

編程手冊大前端 JavaScript 后端開發(fā) 數(shù)據(jù)庫移動端運維開發(fā) UI設計計算機基礎 XML Web Services

下載 js特效網(wǎng)站源碼工具下載類庫下載網(wǎng)站素材學習資源插件擴展手機/移動開發(fā) 手機游戲

作業(yè)一

一、jQuery基礎知識：
1、jQuery是一個非常流行的javaScript函數(shù)庫，常用來操作DOM，Ajax,動畫、遍歷和事件操作，簡化javascript代碼操作，宗旨：寫的更少，而做的更多；
2、jquery引用操作：

官網(wǎng)下載：jQuery下載
CDN：bootstrap中文網(wǎng)
又拍云
composer:composer require components/jquery

3、$()
jQuery庫是一個全局函數(shù)，jQuery()和$()返回一個jQuery對象，但它不是構造函數(shù)，而是工廠函數(shù)，jQuery對象又屬性和方法組成；
4、重要術語：
（1）、jQuery函數(shù)

jQuery(),$()
用于創(chuàng)建jQuery對象
注冊DOM就緒的回調(diào)
充當jQuery命名空間
通常也稱之：jQuery全局對象

（2）jQuery對象

是jQuery函數(shù)$()的返回值
返回不是一個，而是由多個html元素對象組成“文檔元素集合”
是類數(shù)組

（3）、選中元素和匹配元素：根據(jù)CSS選擇器匹配到所有的文檔元素集合
（4）、jQuery方法和靜態(tài)方法

靜態(tài)方法，直接由工廠函數(shù)調(diào)用的方法：$.each(arr,function(){……})
方法：由jQuery對象調(diào)用：$(selector).each(function(){……})

5、查詢結(jié)果的處理：

toArray():將jQuery查詢結(jié)果轉(zhuǎn)為真正的數(shù)組
each():遍歷jQuery對象（類數(shù)組）
map():遍歷jQuery對象（類數(shù)組),返回新數(shù)組
index():獲取jQuery對象中指定元素的索引
is():判斷jQuery對象集合中是否存在指定的元素

6、其他知識：

$().click(回調(diào)函數(shù))鼠標單擊事件

$().on(‘觸發(fā)行為’，回調(diào)函數(shù))

作業(yè)二

一、jquery基礎知識代碼練習
1、代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="vendor\components\jquery\jquery.js"></script>
</head>
<body>
  <ul id="first">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ul>
  <ul id="second">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ul>
  <script>
      console.log(jQuery());
      console.log($);
      console.log($(document).jquery);
      $(document.body).css('background-color','lightgreen'); 
      // 1、jQuery基本語法 $(css選擇器).操作方法();返回jQuery對象
      console.log($('li'));
      $('li').css('color','red');//隱式迭代，自動循環(huán)處理每個元素；
      // 2、$(js對象) 返回JS對象
      lis=document.querySelectorAll('#second li');
      console.log(lis);
      $(lis).css('color','black');
      console.log($(lis));
      // 3、$(帶有標簽的html文本，上下文)：返回是jQuery對象；
      $('<h3>第二個列表</h3>').insertBefore('#second');
      // 4、$(回調(diào)函數(shù))：文檔加載完畢并且DOM處于可操作狀態(tài)才會調(diào)用
        // 當前頁面的全部jQuery代碼放入回調(diào)函數(shù)中
          // 1. 代碼放在回調(diào)中, 可以將jquery代碼放在頁面中的任何地方執(zhí)行
          // 2. 代碼放在回調(diào)中, 可以放心的使用$(),不必提心沖突,因為函數(shù)會創(chuàng)建出一個獨立作用域
      $(function(){
          $('#first').css(
              {
                  'background-color':'yellow',
                  'font-size':'1.5rem'
              }
          );
      });
      // console.log($('#first'));
      console.log($('*').length);
      console.log($('*').get(1));
      // console.log('元素數(shù)量: ', $('*').size());
     console.log($('li').toArray());
     $('li').toArray().forEach(function(value,index){
         console.log('元素'+index+':'+value);
     })
     $.each($('*'),function(index,value){
         console.log(index,value);
     })
     $('*').each(function (index,value){
          console.log(index,value);
       })
  </script>
</body>
</html>

2、運行結(jié)果

二、jquery查詢結(jié)果處理
1、代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
</head>
<body>
  <ul id="first">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
  </ul>
  <script>
      console.log($('body'));
      var arr=$.map($('li'),function(value,index){ if (index % 2)return value});
      console.log(arr);
      console.log($('ul'));
      // 委托事件
      $('ul').click(function(ev){
          console.log('點擊了第'+($(ev.target).index()+1)+'元素');
      });
      $('ul').on('click',function(ev){
          if($(ev.target).is(':nth-child(3)')){
              $(ev.target).css({
                  'color':'red',
                  'font-size':'2rem',
              });
          }
      });
  </script>
</body>
</html>