黑马程序员技术交流社区

标题: JQuery [打印本页]
作者: 手指画个圈    时间: 2018-8-14 15:15
标题: JQuery
  


  JQuery                 
jQuery是一个JS函数库，100+函数，用于简化DOM操作　　(1)DOM操作简化函数
　　(2)事件处理函数
　　(3)动画函数
　　(4)AJAX操作
使用JQuery提供的函数
　　JQuery的版本：
　　JQuery1.x:体积较打，兼容IE，有缺失
　　JQuery2.x:体积少小，放弃IE，功能多
　　JQuery3.x:放弃IE，功能更加丰富
  注意：推荐将jQuery.js的引入和自定义的JS代码编写在BODY最后。
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>在HTML中使用jQuery</h1>
  <button>为P添加样式</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab quaerat minus beatae corporis possimus quam numquam qui pariatur ex omnis corrupti nesciunt quo natus tenetur accusantium doloribus obcaecati dignissimos adipisci.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestiae a et ab aperiam. Tempore a amet perferendis ea culpa ex blanditiis error sit. Eligendi aliquam error possimus tempora ullam.</p>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
  //DOM实现：给所有的p元素添加边框和文字颜色
  var list = document.querySelectorAll('p');
  for(var i=0; i<list.length; i++){
    var p = list;
    p.style.border = "1px solid #080";
    p.style.color = "#080";
    p.style.backgroundColor = "#dfd";
  }

  //jQuery实现：给所有的p元素添加边框和文字颜色
  //$('p').css('border', '1px solid #800');
  //$('p').css('color', '#800');
  //$('p').css('background-color', '#fdd');

  </script>
</body>
</html>
  jQuery函数的特性：
  (1)几乎所有的函数都自带循环功能，可以对选中的元素进行遍历
  (2) 几乎所有的函数都返回jQuery对象


  练习：点击按钮后，修改所有P的样式   11:02~11:15
$( "button" ).on( "click", function( ) {
   //按钮的单击事件处理过程....
});

ES6新特性：新的字符串声明方式—— ``字符串
(1)可以包含${}形式的变量占位符，如：
    var str= `用户名：${uname}  年龄：${age+2}`
(2)支持字符串的换行
    var str = `<tr>
<td></td>
</tr>`;

  区分：DOM对象和jQuery对象
  (1)DOM对象：浏览器把每个HTML标签都对应创建一个DOM对象
  (2)jQuery对象：通过jQuery选择器函数($())返回的类数组对象，其中封装着DOM对象
  (3) jQuery对象不能使用DOM对象的成员；反之也不行！
  (4)jQuery对象转换为DOM对象：
$('div')[0].style.color = '#f00';
  (5)DOM对象转换为jQuery对象：
$(domObj).css('color', '#f00'); //注意$()里边不能使用引号




使用jQuery查找元素 —— 重点

  jQuery中查找元素，使用函数：

jQuery('选择器') 或其别名 $('选择器')

  其中的参数选择器支持CSS中所有的选择器，并进行了扩展。

  (1)Basic（基本选择器）

#id .class   div * s1,s2,s3

<h1>基本选择器</h1>
  <div class="dropdown">
    <a href="#3">产品大全</a>
    <ul class="menu">
      <li>冰箱</li>
      <li>洗衣机</li>
      <li>奶粉</li>
      <li>尿不湿</li>
    </ul>
  </div>
  
  <script src="js/jquery-1.11.3.js"></script>
  <script>
  //var r1 = $('div');
  //console.log(r1);
  //var r2 = r1.css('margin','0');
  //console.log(r2);
  //console.log(r1===r2);  //true
  //$('*').css('padding','0');

  $('*').css('margin','0').css('padding','0');
  $('a').css('color','#000').css('text-decoration', 'none');
  $('.menu').css('border','1px solid #aaa').css('position','absolute').css('width','120px').hide();


  var isShown = false;  //下拉菜单当前是否显示
  //点击超链接，则隐藏/显示下方的菜单
  $('.dropdown > a').click(function(e){
    e.preventDefault(); //阻止超链接被点击的默认行为

    if(isShown){         
      $('.menu').hide();
      isShown = false;
    }else {
      $('.menu').show();
      isShown = true;
    }
  });
  (2)Hierarchy（层级选择器）
parent > child parent  child   
prev + nextSibling prev ~ nextAllSibling

  <h1>层级选择器</h1>
  <div>
    <p>P1</p>
    <p>P2</p>
    <div class="box">BOX</div>
    <p>P3</p>
    <p>P4</p>
  </div>

  <script src="js/jquery-1.11.3.js"></script>
  <script>
    $('.box + p').css('text-decoration','underline');
    $('.box ~ p').css('color','#0a0');
  </script>

--------------------------------
  <h1>层级选择器</h1>
  <ul class="tabs">
    <li><a href="#">十元套餐</a></li>
    <li><a href="#">二十元套餐</a></li>
    <li><a href="#">三十元套餐</a></li>
  </ul>

  <script src="js/jquery-1.11.3.js"></script>
  <script>
    $('*').css('margin','0').css('padding','0');
    $('ul.tabs').css('list-style','none');
    $('ul.tabs > li').css('float','left').css('margin','16px 0');
    $('ul.tabs > li > a').css('text-decoration','none').css('color','#000').css('padding', '8px 16px').css('border-bottom','1px solid #aaa');

    //为标签页头中的a绑定监听函数
    var jQObject = $('ul.tabs > li > a');
    jQObject.click(function(e){
      e.preventDefault();

      //重置所有a的边框为下边框
      jQObject.css('border','none').css('border-bottom', '1px solid #aaa');

      //当前被点击的a，修改为上左右边框
      $(this).css('border','1px solid #aaa').css('border-bottom', 'none');
    });
  </script>
(3)Attribute（属性选择器）
  [属性名] [属性名="值"]
  [属性名^="值") [属性名$="值"]
  [属性名*="值"] [属性名!="值"]
  <h1>属性选择器</h1>
  <a href="#" title="空链接">链接1</a>
  <a href="http://tmooc.cn" title="绝对地址">链接2</a>
  <a href="#chapter1" >链接3</a>
  <a href="1.jpg">链接4</a>
  <a href="2.png">链接5</a>
  <a href="3.gif">链接6</a>

  <script src="js/jquery-1.11.3.js"></script>
  <script>
  $('a').css('color','#000');

  //(1)选定所有具备title属性的链接元素，添加边框
  $('a[title]').css('border','1px solid #aaa');
    //(2)选定所有指向空锚点(#)的链接元素，颜色淡灰
  $('a[href="#"]').css('color','#666');
    //(3)选定所有指向绝对URL(http开头)的链接元素，背景颜色淡蓝
  $('a[href^="http"]').css('background','#aaf');
    //(4)选定所有指向的图片URL(以.jpg/png/gif结尾)的链接元素，字体加粗
  $('a[href$=".jpg"],a[href$=".png"],a[href$=".gif"]').css('font-weight','bold');

  </script>  
(4)Form（表单元素选择器）
:text :password :radio :checkbox
:submit :reset :button :image
:hidden :file
$(':text') 选定 <input type="text">的元素
:disabled :enabled :checked :selected
选定具有特定属性的表单元素

  <h1>表单元素选择器</h1>
  <form action="9.php">
    <input type="text" placeholder="请输入用户名"><br>
    <input type="password" placeholder="请输入密码"><br>

    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="按钮">
    <input type="image" src="btn.jpg">
    <img src="btn.jpg">

  </form>


  <script src="js/jquery-1.11.3.js"></script>
  <script>
  $(':text, :password').css('border-radius','3px');

  $(':image, img').css('vertical-align','middle');
  </script>
  (5)Basic Filter（基本过滤选择器）
:first :last :even  :odd
:eq(i) :lt(i) LessThan :gt(i) GreaterThan
:not(selector)
注意：基本过滤选择器把选定的所有元素放在一个大的集合中！下标从0开始分配。

<h1>基本过滤选择器</h1>
  <ol>
    <li>OL-LI-0</li>
    <li>OL-LI-1</li>
    <li>OL-LI-2</li>
    <li>OL-LI-3</li>
    <li>OL-LI-4</li>
  </ol>
  <hr>
  <ul>
    <li>UL-LI-0</li>
    <li>UL-LI-1</li>
    <li>UL-LI-2</li>
    <li>UL-LI-3</li>
    <li>UL-LI-4</li>
    <li>UL-LI-5</li>
  </ul>


  <table border="1" width="100%">
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
      </tr>
      <tr>
        <td>20</td>
        <td>21</td>
      </tr>
      <tr>
        <td>30</td>
        <td>31</td>
      </tr>
    </tbody>
  </table>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
  //(1)选定第一个li，字体加粗
  $('li:first').css('font-weight','bold');
//(2)选定最后一个li，字体变斜
  $('li:last').css('font-style','italic');

  //(3)选定下标为1的li，背景红色
  $('li:eq(1)').css('color', '#f00');

  //(3)选定奇数个li，背景淡蓝色
  $('li:odd').css('background', '#ddf');

//(4)选定偶数个li，背景淡黄色
  $('li:even').css('background', '#ffd');

  //(5)选定第3个li，添加删除线
  $('li:eq(3)').css('text-decoration', 'line-through');
//(4)选定大于3个li，添加border-left
  $('li:gt(3)').css('border-left', '1px solid #000');
  $('tr td:first').css('background', '#dfd');
  </script>  
  (6)Child Filter（子元素过滤选择器）
:first-child :last-child
:nth-child(2 / odd / even / 3n+1) :only-child
注意：子元素过滤选择器把选定的元素按照所在父元素进行分组！下标从1开始分配。
    <h1>子元素过滤选择器</h1>
  <ol>
    <li>OL-LI-0</li>
    <li>OL-LI-1</li>
    <li>OL-LI-2</li>
    <li>OL-LI-3</li>
    <li>OL-LI-4</li>
  </ol>
  <hr>
  <ul>
    <li>UL-LI-0</li>
    <li>UL-LI-1</li>
    <li>UL-LI-2</li>
    <li>UL-LI-3</li>
    <li>UL-LI-4</li>
    <li>UL-LI-5</li>
  </ul>


  <table border="1" width="100%">
    <tbody>
      <tr>
        <td>00</td>
        <td>01</td>
      </tr>
      <tr>
        <td>10</td>
        <td>11</td>
      </tr>
      <tr>
        <td>20</td>
        <td>21</td>
      </tr>
      <tr>
        <td>30</td>
        <td>31</td>
      </tr>
    </tbody>
  </table>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
  //(1)选定第一个li，字体加粗
  $('li:first-child').css('font-weight','bold');
//(2)选定最后一个li，字体变斜
  $('li:last-child').css('font-style','italic');
//(3)选定奇数个li，背景淡蓝色
  $('li:nth-child(2n+1)').css('background','#eef');
//(4)选定偶数个li，背景淡黄色
//(5)选定第3个li，添加删除线
  $('li:nth-child(3)').css('text-decoration','line-through');
//(4)选定大于3个li，添加border-left
  $('tr td:first-child').css('background', '#dfd');
  </script>  






















欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2