python學習第十四課-- JQUERY

選擇器css

#id    element   classnamehtml

$(「#id」)  = $(document.getElementById(「id」)node

對於多個classname, 要找到某一個,如jquery

<style>app

    .abc {background-color: #0000FF}ide

</style>函數

<div class=」abc」>hello</div>測試

<div class=」abc」>hello</div>動畫

<div class=」abc」>hello</div>this

使用

<script>

    $(function(){

        $($(".abc").get(1)).css('background-color','green')

    })

</script>

能夠找到第二個並把它底色改變

$(".abc").get(1) 是找到第二個classabchtml element,外層加個$()把它變成jquery的對象,而後就能使用css功能了($(「.abc).get(1) = $(「.abc」)[1]  )

也可使用 $(「.abc」).eq(1).css()

 

$(「」).size()       $(「」).length

 

羣組選擇器

         $(「span,p,div」)

後代選擇器

         $(「div p」)  $(「div」).find(「p」)

子選擇器

         $(「div > p」)   $(「div」).children(「p」)

通配選擇器

         $(「*」)  通常不在全局用,浪費資源,而是在某個標籤下再使用如 $(「div *」)

標籤和classname能夠一塊兒使用精肯定位,如:

<div class=’abc’>hello</div>    $(「div.abc」)

屬性選擇器

         <a title=’num1’>num1</a>

         <a title=’num2’> num2 </a>

         <a>num3</a>

         使用$(「a[titile]」) 能夠找到前兩個,使用$(「a[titile=num1]」) 會找到第一個

 

過濾選擇器

         :first(.first())  :last(.last())  :not() (.not() )   :even        :odd           :eq()  :gt()   :lt()   :header  :focus  :animated

內容過濾器

         :contains(「text」)  包含文本 text的元素

         :empty  不包含文本或子元素的元素

         :has(selector)  含有子元素selector的元素

                  要區別 hasClass(classname)  .has(expr|ele)

         :parent  包含文本或子元素的元素  ――注意它與.parent()不一樣,它返回當前元素的父元素(parents()  parentsUntil()

可見性過濾器

         :hidden  :visible

         $(「:hidden」)  找到全部隱藏的元素  

         $(「div:hidden」)  找到DIV下全部隱藏的元素

篩選

         filter()   篩選出與指定表達式匹配的元素集合。用於縮小匹配的範圍。用逗號分隔多個表達式,如:

         <li>列表1</li>

         <li>列表3</li>

         <li>列表2</li>

         <li>列表7</li>

         <li>列表4</li>

         <li>列表5</li>

         <li>列表6</li>

         $(function(){

        $("li").filter('.abc,:first').css('background','red');

      })  它會將第一個li 加了class abc的元素加紅底

         $(function(){

        $("li").filter('.abc’).filter(‘:first').css('background','red');

      })  它會將li中的加了class abc且爲第一個的元素加紅底

 

基礎DOM操做

獲取與設置元素內容

         html()獲取html 內容    text()獲取文本內容     val()獲取表單中的value

         若是()中有值,就會設置其內容

         <ul><li>列表1</li><li>列表2</li></ul>

         <input type="button" value="提交"/>

        

         $(「ul」).html() 會獲取  <li>列表1</li><li>列表2</li>

         $(「ul」).text() 會獲取  列表1列表2

         $(「input」).val() 會獲取提交

        

         $("ul").html('<li>列表3</li><li>列表4</li>'); 會把本來ul包含的內容改成

         <ul><li>列表3</li><li>列表4</li></ul>

 

    $("ul").text('列表5列表6'); 把本來ul包含的內容改成

         <ul>列表5列表6</ul>

 

         $("input").val('測試');會把原來的input改成

         <input type="button" value="測試"/>

元素屬性操做

         attr(key)   attr(key,value)  attr({key1:value1,key2:value2,…})

attr(key,function(index,value){})  value可使用函數來獲得

removeAttr(key)

 

CSS操做

         $().css()  如:

         $(「div」).css(‘color’) 能夠獲得 color

         $("div").css({‘color’:'red',’height’:100,’width’:200}) 能夠設置divcss的屬性

         還可使用函數,如:

         $(「div」).css({ ‘color’:function(){},’height’:function(){},..  } )

        

         $().addClass() 能夠增長class

         $().removeClasss() 刪除

         $().toggleClass()  class之間的切換

                   例:$('div').click(function(){

                                   $(this).toggleClass(funtion(){

                                            if($(this).hasClass('red')){

                                                    $(this).removeClass('red');

                                                     return 'green';

                                            }else{

                                                     $(this).removeClass('gree');

                                                     return 'red';

                                                     }

                                            });}  

 

         width()  height()  innerHeight()  innerWidth()outerHeight()  outerWidth()

                  $(window).width() 能夠獲得窗口的寬度  $(document).width()

         $("div").width(400)  能夠設置div的寬度爲400px

         也可使用函數 width(function(index,width){})

         offset()    position()                  scrollTop()        scrollLeft()

                  $('div:first').offset().top  獲得第一個divtop

                  $('div:first').offset({top:100,left:8}) 設置第一個divtop  left

 

DOM操做

         1.建立節點

                  var box = $(「<div id=’div1’>插入節點</div>」)

         2.插入節點

                  內部插入

                  $(「div」).append(box)

                  append(content|function(){})  能夠直接插入內容也能夠是函數

                  appendTo(content)

                  prepend(content|function(){})

                  prependTo(content)

                  外部插入

                  after(content|function(){})

                  befor(content|function(){})

                  insertafter()   insertbefor()

 

         3.包裹

                  wrap(html)      wrap(element)        wrap(function(){})

                  unwrap()

                  wrapAll(html)  wrap(element)

                  wrapInner(html)      wrapInner(element)        wrapInner(function(){})

 

         4.複製節點clone(true) 

                  若是不加true,只複製元素和內容,若是加true,則元素附帶的事件處理行爲也複製

         5.刪除節點remove()              detach()

                  remove刪除後不保留事件行爲,detach保留

         6.清空節點 empty()

         7.替換節點 replaceWith()  replaceAll()

                  $('div').replaceWith('<span>node</span>'); DIV替換成span

                  $('<span>node</span>').replaceAll('div');     同上

 

表單選擇器

  1. 常規選擇器

$(‘input [name=’b2’]’).val()

  1. 表單選擇器

:input  選取全部input textarea,selectbutton元素

:text          選取全部單行框, type=text

:password 選取全部密碼框

:radio       選取全部單選框

:checkbox        選取全部複選框

:submit  :reset  :p_w_picpath  :button  :file  :hidden

  1. 表單過濾器

:enable 選取全部可用元素

:disable     選取全部不可用元素

:checked  選取全部被選中的元素,單選和複選字段

:selected  選取全部被選中的元素,下拉列表

 

事件        

         click dbclick     mousedown    mouseupmousemove    mouseover      mouseout        change    select         submit     keydownkeypress  keyup       blur  focus        loadresize       scroll        error

         綁定事件

                  bind(type,[data],fn)

                  bind(‘type1 type2’,fn)

                  bind({

                          ‘type1’:function(){},

                          ’type2’:function(){}

                          })

         刪除綁定事件

                  unbind()  刪除所有事件

                  unbind(‘type1’) 刪除type1事件,若是有多個事件

                  unbind(‘type1’,fn) 刪除事件type1綁定的函數fn

         簡寫事件綁定方法

                  click(fn)   dblclick(fn)       mousedown()mouseup()       mouseover()   mouseout()         mousemove()mouseenter()  mouseleave()  keydown()        keyup()     keypress()        unload()  resize()         scroll()     focus()     blur()        focusin()  focusout()        select() (文本選定)                  change() (值改變)   submit()

                  mouseover()  mouseenter()  若是有子元素,over 也會觸發事件,enter不會

                  mouseout()     mouseleaver()                  同上

                  keydown()        keyup() 返回的是鍵碼keyCodekeypress()返回的是字符編碼charCode

                  focus() blur()  事件觸發時機是當前元素

                  focusin() focusout()  事件觸發時機能夠是子元素

         複合事件

                  ready(fn)  DOM加載完畢觸發

                  hover([fn1,]fn2)      鼠標移入稱出的複合事件 mouserenter()  mouseleave()

                 

事件對象

         對象的屬性

                  type 事件類型

                  target      返回觸發綁定事件的DOM元素

                  currentTarget      返回監聽綁定事件的DOM,至關於this

                  若是事件綁定在父元素上,currentTarget是返回父元素,而target有可能返回子元素

                  relatedTarget  返回移入移出目標點離開或進入的那個DOM元素

                  data         返回綁定事件的額外數據 

                  pageX/pageY  相對於頁面原點

                  screenX/screenY  相對於顯示器屏幕位置

                  clientX/clientY           相對於頁面視口

                  result

                  timestamp

                  which       若是是鼠標點擊,返回鼠標的左中右鍵(1,2,3),若是是鍵盤,返回鍵盤按鍵

                  altKey/shiftKey/ctrlKey/metaKey         獲取是否按下了alt  shift  ctrl  meta

        

         冒泡和默認行爲

                  阻止冒泡,在函數里加上e.stopPropagation();

                  阻止默認行爲  e.preventDefault();

                          $('form').submit(function(e){e.preventDefault():})  阻止表單提交

                  若是同時阻止冒泡和默認行爲,只須要函數返回false就行

                          $('a').click(function(e){return false;})

 

動畫效果

         顯示 show()   隱藏 hide()

                  show(1000) 1000毫秒 1秒內慢慢變小變透明直到消失

                  還有show(‘slow’|’normal’|’fast’)  600毫秒 400毫秒 200毫秒

                  還能夠加入函數作參數

                  show(‘slow’,function(){})  實現列隊動畫效果,逐個顯示,例:

                           <style>

                          .test{

                                   padding:5px;

                                   margin-right:5px;

                                   background:orange;

                                   float:left;

                          }

                          </style>

                          <div></div>

                          <div></div>

                          <div></div>

                          <div></div>

                          <div></div>

                          <div></div>

                          <div></div>

                          <div>PYTHON</div>

                          <input type="button" value = "顯示"/>

                          <input type="button" value = "隱藏"/>

 

                          $((function){

                          $('.show').click(function(){

                          $('.test').first().show('fast',function testshow(){

                          $(this).next().show('fast',testshow);

                          });

                          });

 

                          $('.hide').click(function(){

                          $('.test').last().hide('fast',function testshow(){

                          $(this).prev().hide('fast',testshow);

                          });

                          });

                          })

                  若是隻用一個按鈕來控制顯示和隱藏,使用 toggle()

                          <p id="toggle-test">PYTHON</p>

                          <input type="button" value = "切換"/>       

 

                     $('.toggle').click(function(){

                     $('#toggle-test').toggle('slow')

                       })

         滑動、捲動

                  slideUp()  slideDown()     slideToggle()

         淡入、淡出

                  fadeIn()   fadeOut()                  fadeToggle()

相關文章
相關標籤/搜索