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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198719
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
03月04日作業(yè)：jQuery對html、css、自定義屬性和常用DOM操作
李東亞1??3????12?
原創(chuàng)
1032人瀏覽過

作業(yè)一

一、常用屬性操作知識點(diǎn)：
1、屬性:

  • getter():獲取，setter():設(shè)置操作

2、html屬性：

  • attr():獲取或者設(shè)置html元素屬性
  • removeAtter():移除html元素屬性

3、css屬性：

  • css()：獲取元素的最終樣式
  • addclass():添加類樣式，與classList.add()功能類似
  • removeclass():刪除類樣式，與classList.remove()功能類似
  • toggleclass():自動切換類樣式，與classList.toggle()功能類似
  • hasclass():判斷是否有指定樣式，classList.contains()功能類似

4、表單操作
val():獲取或者設(shè)置表單元素的值
5、元素的內(nèi)容

  • text():文本內(nèi)容，innerText功能類似
  • html():可解析帶有html標(biāo)簽的文本內(nèi)容，innerHTML

6、元素的自定義屬性值：

  • data()：獲取和設(shè)置元素的數(shù)據(jù)
  • removeData():刪除元素中的數(shù)據(jù)

二、jQuery對DOM操作
1、插入和替換
append()|appendTo():尾部插入元素
prepend()|prependTo():頭部插入元素
after()|inserAfter():后面插入元素
befor()|insertBefor():前面插入元素
replaceWith()|replaceAll():替換目標(biāo)元素內(nèi)容
2、復(fù)制/克隆元素
clone():創(chuàng)建并返回每一個選中元素的副本
3、刪除元素
empty():將當(dāng)前元素的所有子元素清空/刪除
remove():將當(dāng)前元素以及素有的子元素全部刪除
4、其他知識點(diǎn)：
toLowerCase();字符串全部轉(zhuǎn)小寫；

作業(yè)二

1.1、代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  7.     <title>Document</title>
  8.     <style>
  9.         body {
  10.             display: flex;
  11.             flex-direction: column;
  12.             align-items: center;
  13.             color: #666;
  14.         }
  16.         form {
  17.             width: 400px;
  18.             padding: 20px 10px;
  19.             border: 1px solid #aaa;
  20.             box-sizing: border-box;
  21.             box-shadow: 0 0  5px #888;
  22.             background-color: #eee;
  24.             display: grid;
  25.             grid-template-columns: 80px 200px;
  26.             gap: 10px;
  27.             place-content: center center;
  28.         }
  30.         button {
  31.             grid-column: 2 / 3;
  32.             height: 26px;
  33.         }
  35.         button:hover {
  36.             color: white;
  37.             background-color: #000;
  38.             border:none;
  39.             cursor: pointer;
  40.         }
  41.         .red {
  42.             color: red;
  43.         }
  44.     </style>
  45. </head>
  47. <body>
  48.     <h2 class="red">用戶登錄</h2>
  49.     <form action="handle.php" method="post">
  50.         <label for="email">Email:</label>
  51.         <input type="email" name="email" id="email" autofocus value="lectur@php.cn">
  52.         <label for="password">Password</label>
  53.         <input type="password" name="password" id="password" placeholder="不少于6位">
  54.         <label for="confirm">記住我:</label>
  55.         <div>
  56.             <input type="radio" name="save" id="confirm" value="1" checked><label for="confirm">保存</label>
  57.             <input type="radio" name="save" id="cancel" value="0"><label for="cancel">取消</label>
  58.         </div>
  59.         <button>登錄</button>
  61. </body>
  62. <script>
  63.     var form=$('form');
  64.     // 1、attr() 一個參數(shù)事獲取屬性值，兩個參數(shù)（屬性名，新的屬性值）
  65.     console.log(form.attr('action'));
  66.     // console.log(form.attr('action','admin.php'))
  67.     // 同時操作多個，可以用對象字面量作為參數(shù)
  68.     // form.attr({
  69.     //     'action':'admin.php',
  70.     //     'method':'get'
  71.     // })
  72.     form.attr('method','GET');
  73.     form.attr('method',function(){
  74.         var method=$(this).attr('method').toLowerCase();
  75.         if(method==='get'){
  76.              $(this).attr('action','query.php?id=1');
  77.         }
  78.         return 'POST';
  79.     })
  80.     form.removeAttr('action');
  82.     // 2、關(guān)于CSS的操作
  84.     console.log(form.css('width'));
  85.     console.log(form.css('border'));
  86.     console.log(form.css('border-style'));
  87.     console.log(form.css('border-color'));
  89.     $('h2').removeClass('red');
  90.     $('h2').addClass('red');
  92.     $('button').toggleClass('red');//如果有則刪除，沒有則添加
  93.     // $('button').toggleClass('red');
  94.     if($('button').hasClass('red')){
  95.         console.log('有red類樣式');
  96.     }
  97.     $('#email').val('ldy@php.com');//并沒有改變html中的值，只是在渲染html頁面時替換了
  98.     $('#email').val(function(){
  99.         return this.defaultValue;
  100.     });
  103.     $('h2').text('登陸表單');//添加文本內(nèi)容，無法識別html標(biāo)簽元素
  104.     $('h2').html('登錄<span style="color:green">表單</span>');//可以識別html元素；
  106.     var form=document.forms.item(0);
  107.     console.log(form.getBoundingClientRect());//包含x,y坐標(biāo)，上下左右（距父級起點(diǎn)的距離）和寬高
  108.     console.log($('form').offset());//只有上，左，離頂部的距離
  110.     $('body').css('height','2000px');
  112.     // $(document).on('scroll',function(){
  113.     //     console.log($(document).scrollTop());
  114.     // });
  116.     form.dataset.src='1';
  117.     console.log($(form).data('src'));
  118.     // $(form).data('src','2');
  119.     $(form).removeData('src');
  120.     // $(form).data('src', 'PHP中文網(wǎng)歡迎你');
  122. </script>
  123. </html>

1.2、運(yùn)行結(jié)果圖：

2.1代碼

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  6.     <title>Document</title>
  7.     <style>
  8.         .action{
  9.             color:red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <script>
  15.         $('body').append('<ol>');
  16.         // $('body').prepend('<ol>');
  17.         // $('<li>').text('華為手機(jī)').appendTo('ol:last-child()');
  18.         // $('<li>').text('小米手機(jī)').prepednTo();
  19.         $('<li>').text('小米手機(jī)').appendTo('ol:first-child()');
  20.         $('<li>').addClass('action').html('<span>智能手機(jī)</span').appendTo('ol');
  21.         // 添加元素的同時可以添加樣式屬性
  22.         $('<li>', {
  23.             'id': 'test',
  24.             'style': 'background-color: yellow'
  25.         }).html('<a href="" alt="">最新男裝</a>').appendTo('ol');
  27.         $('ol').append(function(){
  28.             var lis='';
  29.             for(var i=0;i<5;i++){
  30.                 lis+='<li>最新產(chǎn)品'+(i+1)+'</li>';
  31.             }
  32.             return lis;
  33.         });
  34.         $('ol > li:nth-child(3)').before('<li>新元素1</li>');
  35.         $('ol > li:nth-child(3)').after('<li>新元素2</li>');
  36.         $('<li>新元素3</li>').insertBefore('ol > li:first-child()');
  38.         $('ol>:last-of-type()').replaceWith('<h4>替換元素</h4>');
  39.         $('<h4>我才是第一個</h4>').replaceAll('ol > li:first-of-type');
  41.         var ul=$('<ul>').appendTo('body');
  42.         ul.append(function(){
  43.             return $('ol:first-of-type > li:nth-of-type(-n+4)').clone();
  44.         });
  45.         console.log($('ol>li:nth-of-type(-n+2)'));
  47.         // $(ul).empty();
  48.         $(ul).remove();
  49.     </script>
  50. </body>
  51. </html>

2.1運(yùn)行效果圖：

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：寫得很好, 總結(jié)也到位.... 明天開始進(jìn)行第三階段laravel學(xué)習(xí), 建議作業(yè)進(jìn)度與課程一致
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)