03月03月作业：jquery基础知识和查询结果处理

作业一

一、jQuery基础知识：
1、jQuery是一个非常流行的javaScript函数库，常用来操作DOM，Ajax,动画、遍历和事件操作，简化javascript代码操作，宗旨：写的更少，而做的更多；
2、jquery引用操作：

官网下载：jQuery下载
CDN：bootstrap中文网
又拍云
composer:composer require components/jquery

3、$()
jQuery库是一个全局函数，jQuery()和$()返回一个jQuery对象，但它不是构造函数，而是工厂函数，jQuery对象又属性和方法组成；
4、重要术语：
（1）、jQuery函数

jQuery(),$()
用于创建jQuery对象
注册DOM就绪的回调
充当jQuery命名空间
通常也称之：jQuery全局对象

（2）jQuery对象

是jQuery函数$()的返回值
返回不是一个，而是由多个html元素对象组成“文档元素集合”
是类数组

（3）、选中元素和匹配元素：根据CSS选择器匹配到所有的文档元素集合
（4）、jQuery方法和静态方法

静态方法，直接由工厂函数调用的方法：$.each(arr,function(){……})
方法：由jQuery对象调用：$(selector).each(function(){……})

5、查询结果的处理：

toArray():将jQuery查询结果转为真正的数组
each():遍历jQuery对象（类数组）
map():遍历jQuery对象（类数组),返回新数组
index():获取jQuery对象中指定元素的索引
is():判断jQuery对象集合中是否存在指定的元素

6、其他知识：

$().click(回调函数)鼠标单击事件

$().on(‘触发行为’，回调函数)

作业二

一、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');//隐式迭代，自动循环处理每个元素；
      // 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、$(回调函数)：文档加载完毕并且DOM处于可操作状态才会调用
        // 当前页面的全部jQuery代码放入回调函数中
          // 1. 代码放在回调中, 可以将jquery代码放在页面中的任何地方执行
          // 2. 代码放在回调中, 可以放心的使用$(),不必提心冲突,因为函数会创建出一个独立作用域
      $(function(){
          $('#first').css(
              {
                  'background-color':'yellow',
                  'font-size':'1.5rem'
              }
          );
      });
      // console.log($('#first'));
      console.log($('*').length);
      console.log($('*').get(1));
      // console.log('元素数量: ', $('*').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、运行结果

二、jquery查询结果处理
1、代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="//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>

2、运行结果图：

作业一

作业二

相关文章