jQuery第三天

課程回顧：

? 動畫效果：基本動畫，滑動動畫，淡入淡出，自定義動畫效果(animate)

? 事件切換：hover(over，out);

? 停止動畫：stop

? 操作屬性：prop（固有屬性），attr（自定義屬性），data

? 文本內容值：html，text，val

案例：購物車案例模塊-增減商品數量

①核心思路：首先聲明一個變量，當我們點擊+號（increment），就讓這個值++，然后賦值給文本框。②注意1： 只能增加本商品的數量， 就是當前+號的兄弟文本框（itxt）的值。 ③修改表單的值是val() 方法④注意2： 這個變量初始值應該是這個文本框的值，在這個值的基礎上++。要獲取表單的值⑤減號（decrement）思路同理，但是如果文本框的值是1，就不能再減了，直接return false即可

**購物車案例模塊-**修改商品小計

①核心思路：每次點擊+號或者-號，根據文本框的值 乘以 當前商品的價格  就是 商品的小計②注意1： 只能增加本商品的小計， 就是當前商品的小計模塊（p-sum）  ③修改普通元素的內容是text() 方法④注意2： 當前商品的價格，要把￥符號去掉再相乘 截取字符串 substr(1)⑤parents(‘選擇器’) 可以返回指定祖先元素  ⑥最后計算的結果如果想要保留2位小數 通過 toFixed(2)  方法⑦用戶也可以直接修改表單里面的值，同樣要計算小計。 用表單change事件⑧用最新的表單內的值 乘以 單價即可  但是還是當前商品小計點擊獲取單價和數量相乘的結果保存給小計既可用戶直接輸入數字問題

parents

<body><div class="c1"><div class="c2"><div class="c3"><div class="c4">哇哈哈</div></div></div></div><script type="text/javascript">// parentsconsole.log( $('.c4').parents('.c1') );</script></body>

jQuery 元素操作

主要是遍歷、創建、添加、刪除元素操作。

遍歷元素

jQuery 隱式迭代是對同一類元素做了同樣的操作。如果想要給同一類元素做不同操作，就需要用到遍歷。

語法1：$(“div”).each(function(index, domEle) { xxx; }）

\1. each() 方法遍歷匹配的每一個元素。主要用DOM處理。 each 每一個\2. 里面的回調函數有2個參數：  index 是每個元素的索引號;  demEle 是每個DOM元素對象，不是jquery對象\3. 所以要想使用jquery方法，需要給這個dom元素轉換為jquery對象  $(domEle)主要用來遍歷元素

語法2：$.each(object，function(index, element){ xxx;}）

\1. $.each()方法可用于遍歷任何對象。主要用于數據處理，比如數組，對象\2. 里面的函數有2個參數：  index 是每個元素的索引號;  element  遍歷內容主要用來遍歷數據

**案例：購物車案例模塊-**計算總計和總額

①核心思路：把所有文本框里面的值相加就是總計數量。總額同理②文本框里面的值不相同，如果想要相加需要用到each遍歷。聲明一個變量，相加即可③點擊+號-號，會改變總計和總額，如果用戶修改了文本框里面的值同樣會改變總計和總額④因此可以封裝一個函數求總計和總額的， 以上2個操作調用這個函數即可。⑤注意1： 總計是文本框里面的值相加用 val()     總額是普通元素的內容用text()  ⑥要注意普通元素里面的內容要去掉￥并且轉換為數字型才能相加多次需要求總計，所有封裝函數最為合適

創建元素

語法：$(’’

  • ’’);

添加元素

內部添加

element.append(’‘內容’’) [把內容放入匹配元素內部最后面，類似原生 appendChild

element.prepend(’‘內容’’) 把內容放入匹配元素內部最前面。

外部添加

element.after(’‘內容’’) // 把內容放入目標元素后面

element.before(’‘內容’’) // 把內容放入目標元素前面

①內部添加元素，生成之后，它們是父子關系。②外部添加元素，生成之后，他們是兄弟關系。

刪除元素

element.remove() // 刪除匹配的元素（本身）[元素就不在了]

element.empty() // 刪除匹配的元素集合中所有的子節點[內容刪除，元素依舊存在]

element.html(’’’’) // 清空匹配的元素內容

①remove 刪除元素本身。②empt() 和  html('''') 作用等價，都可以刪除元素里面的內容，只不過 html 還可以設置內容。

**案例：購物車案例模塊-**刪除商品模塊

①核心思路：把商品remove() 刪除元素即可②有三個地方需要刪除： 1. 商品后面的刪除按鈕 2. 刪除選中的商品 3. 清理購物車③商品后面的刪除按鈕： 一定是刪除當前的商品，所以從 $(this) 出發④刪除選中的商品： 先判斷小的復選框按鈕是否選中狀態，如果是選中，則刪除對應的商品⑤清理購物車： 則是把所有的商品全部刪掉

**案例：購物車案例模塊-**選中商品添加背景

①核心思路：選中的商品添加背景，不選中移除背景即可②全選按鈕點擊：如果全選是選中的，則所有的商品添加背景，否則移除背景③小的復選框點擊： 如果是選中狀態，則當前商品添加背景，否則移除背景④這個背景，可以通過類名修改，添加類和刪除類

上午回顧：

? parents：獲取所有上級元素

? jQuery元素操作：

? 遍歷元素：

? $(元素).each(function (index, elm) {注意：elm是DOM對象});

? $.each(對象，function (index, elm) {});

? 創建元素：$(‘

  • 新的元素
  • ’);

    ? 添加元素：

    ? 內部添加：append，appendTo，prepend，prependTo

    ? 外部添加：after，before

    ? 刪除元素：remove，empty，html(’’);

    jQuery 尺寸、位置操作

    jQuery 尺寸

    width()、height()【只算width和height】

    innerWidth()、innerHeight()【包含padding+width】

    outerWidth()、outerHeight()【包含padding、border、width】

    outerWidth(true)、outerHeight(true)【包含padding、border、margin、width】

    以上參數為空，則是獲取相應值，返回的是數字型。
如果參數為數字，則是修改相應值。
參數可以不必寫單位。<style type="text/css">div {width : 100px;height: 100px;background: red;margin: 10px;padding: 10px;border:10px solid blue;}</style>
</head>
<body><input type="button" value="點擊"><div></div><script type="text/javascript">$('input').click(function () {// var w = $('div').width();// var h = $('div').height();// console.log(w,h);// 設置// $('div').width(200);// var w = $('div').innerWidth();// var h = $('div').innerHeight();// console.log(w,h);// $('div').innerWidth(200);// var w =  $('div').outerWidth();// var h = $('div').outerHeight()// console.log(w, h);// $('div').outerWidth(200);// var w = $('div').outerWidth(true);// var h = $('div').outerHeight(true);// console.log(w,h);// $('div').outerWidth(200,true);});</script>

    jQuery 位置

    位置主要有三個： offset()、position()、scrollTop()/scrollLeft();

    offset：獲取元素相對于文檔偏移量（獲取的是對象），可以設置

    position：獲取元素相對于定位父的偏移量（獲取的是對象），不可以設置

    offset()設置或獲取元素偏移

    ①offset() 方法設置或返回被選元素相對于**文檔**的偏移坐標，跟父級沒有關系。
$(元素).offset();
②該方法有2個屬性 left、top 。offset().top  用于獲取距離文檔頂部的距離，offset().left 用于獲取距離文檔左側的距離。③可以設置元素的偏移：offset({ top: 10, left: 30 });// 獲取son的位置// offset：獲取元素距離文檔的位置，返回是對象// 如果只想獲取其中某一個值，那么我們offset().top// console.log( $('.son').offset() );$('.son').offset({top : 200,left : 300});

    position() 獲取元素偏移**

    ①position() 方法用于返回被選元素相對于**帶有定位的父級**偏移坐標，如果父級都沒有定位，則以文檔為準。
$('元素').position()②該方法有2個屬性 left、top。position().top 用于獲取距離定位父級頂部的距離，position().left 用于獲取距離定位父級左側的距離。注意：該方法只能獲取。// 獲取元素距離定位父的偏移位置// console.log( $('.son').position().left );// 注意：offset是可以設置，而position是不可以設置$('.son').position({left : 20,top : 20});

    scrollTop()、scrollLeft()設置或獲取元素被卷去的頭部和左側

    ①scrollTop() 方法設置或返回被選元素被卷去的頭部。

    ②不跟參數是獲取，參數為不帶單位的數字則是設置被卷去的頭部。

    scroll事件：滾動事件，（誰有滾動條加給誰）

    $('div').scroll(function () {// console.log(123);console.log( $('div').scrollTop() );});$('input').click(function () {// $('div').scrollTop(0);$('div').animate({scrollTop : 0}, 3000);});

    案例帶有動畫的返回頂部

    ①核心原理： 使用animate動畫返回頂部。②animate動畫函數里面有個scrollTop 屬性，可以設置位置③但是是元素做動畫，因此$(“body,html”).animate({scrollTop: 0})

    案例：品優購電梯導航

    ①當我們滾動到 今日推薦 模塊，就讓電梯導航顯示出來②點擊電梯導航頁面可以滾動到相應內容區域③核心算法：因為電梯導航模塊和內容區模塊一一對應的④當我們點擊電梯導航某個小模塊，就可以拿到當前小模塊的索引號⑤就可以把animate要移動的距離求出來：當前索引號內容區模塊它的offset().top⑥然后執行動畫即可

    第二部分：①當我們點擊電梯導航某個小li， 當前小li 添加current類，兄弟移除類名②當我們頁面滾動到內容區域某個模塊， 左側電梯導航，相對應的小li模塊，也會添加current類， 兄弟移除current類。③觸發的事件是頁面滾動，因此這個功能要寫到頁面滾動事件里面。④需要用到each，遍歷內容區域大模塊。 each里面能拿到內容區域每一個模塊元素和索引號⑤判斷的條件：  被卷去的頭部 大于等于 內容區域里面每個模塊的offset().top⑥就利用這個索引號找到相應的電梯導航小li添加類。

    課程回顧：

    ? parents：獲取所有上級元素

    ? 元素操作：

    ? 遍歷元素：

    ? 1、$(元素).each(function (index（索引）, elm（元素）) {})

    ? 2、$.each(對象,function (index（索引）, elm（元素）) {})

    ? 創建元素：

     $   ('<li>新的元素</li>');

    ? 添加元素：

    ? 內部添加：

    append （在父元素內最上方），
appendTo（在父元素內最下方），
prepend（在父元素外最上方），
prependTo（在父元素外最下方）

    ? 外部添加：after（下），before（上）

    ? jQuery尺寸：width，innerWidth，outerWidth，outerWidth(true)

        <script>$(function() {// 1. width() / height() 獲取設置元素 width和height大小 console.log($("div").width());// $("div").width(300);// 2. innerWidth() / innerHeight()  獲取設置元素 width和height + padding 大小 console.log($("div").innerWidth());// 3. outerWidth()  / outerHeight()  獲取設置元素 width和height + padding + border 大小 console.log($("div").outerWidth());// 4. outerWidth(true) / outerHeight(true) 獲取設置 width和height + padding + border + marginconsole.log($("div").outerWidth(true));})</script>

    ? jQuery位置：

    ? 偏移位置：offset，position

       <script>$(function() {// 1. 獲取設置距離文檔的位置（偏移） offsetconsole.log($(".son").offset());console.log($(".son").offset().top);// $(".son").offset({//     top: 200,//     left: 200// });// 2. 獲取距離帶有定位父級位置（偏移） position   如果沒有帶有定位的父級，則以文檔為準// 這個方法只能獲取不能設置偏移console.log($(".son").position());// $(".son").position({//     top: 200,//     left: 200// });})</script>

    ? 卷起距離：scrollTop，卷起頂部距離

    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>body {height: 2000px;}.back {position: fixed;width: 50px;height: 50px;background-color: pink;right: 30px;bottom: 100px;display: none;}.container {width: 900px;height: 500px;background-color: skyblue;margin: 400px auto;}</style><script src="jquery.min.js"></script>
</head><body><div class="back">返回頂部</div><div class="container"></div><script>$(function() {$(document).scrollTop(100);// 被卷去的頭部 scrollTop()  / 被卷去的左側 scrollLeft()// 頁面滾動事件var boxTop = $(".container").offset().top;$(window).scroll(function() {// console.log(11);console.log($(document).scrollTop());if ($(document).scrollTop() >= boxTop) {$(".back").fadeIn();} else {$(".back").fadeOut();}});// 返回頂部$(".back").click(function() {// $(document).scrollTop(0);$("body, html").stop().animate({scrollTop: 0});// $(document).stop().animate({//     scrollTop: 0// }); 不能是文檔而是 html和body元素做動畫})})</script>
</body></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/248116.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/248116.shtml
英文地址，請注明出處：http://en.pswp.cn/news/248116.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

C語言程序設計II—第八周教學

C語言程序設計II—第八周教學

第八周教學總結&#xff08;15/4-21/4&#xff09; 教學內容 本周的教學內容為&#xff1a; 　　8.4 電碼加密 知識點&#xff1a;指針與字符串&#xff0c;重難點&#xff1a;字符指針與字符串的關聯和區別&#xff1b; 　　8.5 任意個整數求和 知識點&#xff1a;動態內存分配…
閱讀更多...
AFNetworking 對數據進行https ssl加密

AFNetworking 對數據進行https ssl加密

參考來源&#xff1a;http://www.cnblogs.com/jys509/p/5001566.html 現在在工作中的工作需求&#xff1a;https請求驗證證書一般來講如果app用了web service , 我們需要防止數據嗅探來保證數據安全.通常的做法是用ssl來連接以防止數據抓包和嗅探其實這么做的話還是不夠的 。…
閱讀更多...
數據庫系統原理（第一章概述）

數據庫系統原理（第一章概述）

一、數據庫基本概念 什么是數據&#xff1a;數據&#xff08;Data&#xff09;是描述事物的符號記錄&#xff0c;是指利用物理符號記錄下來的、 可以鑒別的信息。 數據是信息存在的一種形式&#xff0c;只有通過解釋或處理的數據才能成為有用的信息。 什么是數據庫&#xff1a;…
閱讀更多...
jQuery第四天

jQuery第四天

課程回顧&#xff1a; ? 元素操作&#xff1a; ? 遍歷元素&#xff1a; ? $(‘元素’).each(function (index, elm) {}); ? $.each(對象&#xff0c;function (index, elm) {}); ? 創建元素&#xff1a;$(‘ 新的元素?’);? 添加元素&#xff1a; ? 內部添加&…
閱讀更多...
navigationController的NavigationBar和ToolBar的POP或PUSH消失問題

navigationController的NavigationBar和ToolBar的POP或PUSH消失問題

今天在工作中發現一個坑&#xff0c; 其他頁面都是隱藏。YSViewController 使用的時候必須是需要 navigationBar 和 toorbar&#xff0c;但是 pop出這個viewcontroller后&#xff0c;需要隱藏navigationBar 和 toorbar&#xff0c;但是直接設置為hiddenYES會出現其他頁面壓棧出…
閱讀更多...
實驗二：Linux下Xen環境的安裝

實驗二：Linux下Xen環境的安裝

實驗名稱&#xff1a; Linux下Xen環境的安裝&#xff08;centOS7&#xff09; 實驗環境&#xff1a; 本次實驗基本是在centOS7的環境下完成&#xff0c;系統內核和系統版本如下&#xff1a; 實驗要求&#xff1a; 為centOS7的環境下安裝Xen的平臺&#xff0c;能夠正常使用Xen下…
閱讀更多...
IDEA寫vue項目出現紅色波浪線警告如何解決？？

IDEA寫vue項目出現紅色波浪線警告如何解決？？

1.看圖 2.希望對大家有幫助&#xff0c;只要修改了這個就可以&#xff0c;如有任何問題都可以留言&#xff0c;謝謝大家 2019-09-1923:54:11 作者&#xff1a;何秀好 轉載于:https://www.cnblogs.com/itboxue/p/11553395.html
閱讀更多...
數據可視化（BI報表的開發）第一天

數據可視化（BI報表的開發）第一天

課程回顧&#xff1a; ? jQuery事件注冊&#xff1a; ? $(元素).click(function () {}); ? $(元素).on(‘click’, [后代元素], function () {}); ? $(元素).one(‘click’, function () {}); ? 解綁事件&#xff1a;off ? 自動觸發&#xff1a; ? $(元素).click…
閱讀更多...
在Block中使用weakSelf與strongSelf的意義

在Block中使用weakSelf與strongSelf的意義

在Block中使用weakSelf與strongSelf的意義 我們都會聲明一個弱引用在block中使用, 目的就是防止循環引用, 那么weakSelf與strongSelf一起使用目的是什么呢? 首先先定義2個宏: #define YXWeakSelf(type) __weak typeof(type) weak##type type; #define StrongSelf(type) __…
閱讀更多...
操作系統原理之操作系統簡介（第一章）

操作系統原理之操作系統簡介（第一章）

一、 什么是操作系統 操作系統&#xff1a;是一種復雜的系統軟件&#xff0c;是不同程序代碼、數據結構、數據初始化文件的集合&#xff0c;可執行。 操作系統是用戶與硬件之間的接口&#xff1a;操作系統與硬件部分相互作用&#xff0c;并且為運行在計算機上的應用程序提供執行…
閱讀更多...
數據可視化（BI報表的開發）第二天

數據可視化（BI報表的開發）第二天

9、公用面板樣式 所有的面板的基礎樣式是一致的&#xff0c;提前布局好。 面板 .panel &#xff1a;box-sizing&#xff0c;邊框圖&#xff0c;大小&#xff0c;定位【51 38 20 132】容器 .inner&#xff1a;padding&#xff1a;24&#xff0c;36&#xff0c;定位外部拉寬標…
閱讀更多...
關于Xcode 7.3 7.3.1 斷點 卡死 無限菊花

關于Xcode 7.3 7.3.1 斷點 卡死 無限菊花

關于Xcode 7.3 7.3.1 斷點 卡死 無限菊花 只要一打斷點,就無限卡死,變量區一直菊花在轉,只有強制退出Xcode才能重新編譯,找了Google和Stack OvewFlowe依然沒有解決辦法. 刪除項目,重新安裝Xcode,重新運行程序一切辦法都解決不到,百度上說的"build setting中將Enable Clang…
閱讀更多...
html5+hbuilder+夜神模擬器+webview

html5+hbuilder+夜神模擬器+webview

HTML5 Plus應用概述 首先新建一個移動App項目&#xff0c;文件-->新建-->移動APP HTML5 Plus移動App&#xff0c;簡稱5App&#xff0c;是一種基于HTML、JS、CSS編寫的運行于手機端的App&#xff0c;這種App可以通過擴展的JS API任意調用手機的原生能力&#xff0c;實現與…
閱讀更多...
第十九節：Asp.Net Core WebApi知識總結(一)

第十九節：Asp.Net Core WebApi知識總結(一)

111 轉載于:https://www.cnblogs.com/yaopengfei/p/11558525.html
閱讀更多...
iOS設計模式 ——單例模式詳解以及嚴格單例模式注意點

iOS設計模式 ——單例模式詳解以及嚴格單例模式注意點

一、我們常用的單例有哪些&#xff1f; [[UIApplication sharedApplication] statusBarStyle];//系統中的單例模式&#xff0c;通過它獲取到狀態欄的style [NSNotificationCenter defaultCenter] addObserver:<#(nonnull id)#> selector:<#(nonnull SEL)#> name:&…
閱讀更多...
科學計算庫學習報告

科學計算庫學習報告

numpy與matplotlib的學習隨筆 我愛代碼 import numpy as npimport matplotlib.pyplot as pltimport matplotlibmatplotlib.rcParams[font.family]SimHeimatplotlib.rcParams[font.sans-serif][SimHei]labelsnp.array([第一次,第二次,第三次,第四次,第五次,第六次])nAttr6datanp…
閱讀更多...
前端網頁 — 初始化文件

前端網頁 — 初始化文件

/*--------------------------初始化代碼*/ /*清除默認的margin和padding*/ * {margin: 0;padding: 0; }/*清除小圓點*/ ul {list-style: none; }/*清除a標簽默認的下劃線*/ a {text-decoration: none; }/*表格邊框合并*/ table {border-collapse: collapse; }/*去除input標簽點…
閱讀更多...
數據庫系統原理（第二章關系數據庫 ）

數據庫系統原理（第二章關系數據庫 ）

一、關系數據庫概述 20世紀80年代后&#xff0c;在商用數據庫管理系統中&#xff0c;&#xff08; 關系模型 &#xff09;逐漸取代早 期的網狀模型和層次模型&#xff0c;成為主流數據模型 SQL3&#xff08;SQL-99&#xff09;:1999年 SQL2&#xff08;SQL-92&#xff09;&…
閱讀更多...
iOS NSMutableAttributedString常用方法總結

iOS NSMutableAttributedString常用方法總結

NSAttributedString 叫做富文本&#xff0c;是一種帶有屬性的字符串&#xff0c;通過它可以輕松的在一個字符串中表現出多種字體、字號、字體大小等各不相同的風格&#xff0c;還可以對段落進行格式化&#xff0c;一般都是對可變富文本&#xff08;NSMutableAttributedString&a…
閱讀更多...
微信小程序image bindload事件失效不觸發

微信小程序image bindload事件失效不觸發

1.先上代碼 <template><div :class"[img-wrapper, className]"><img :src"defaultSrc" :mode"mode" class"default-img" :hidden"loaded"><img :src"src" :mode"mode" load"…
閱讀更多...
最新文章

Copyright @ 2022~2023