返回jquery改......登陆

jquery改變css樣式及事件函數,事件切換

0基*2019-04-20 13:21:34544

一.改變css樣式

  $(document).ready(function(){
            改變單個css屬性
            $(選擇器).css('屬性名','屬性值')
            $('body').css('background-color','PLUM')
            改變多個css屬性
            $('選擇器').css({'屬性名1':'屬性值1','屬性名2','屬性值2','屬性名3','屬性值3'})
              $("p").css({'color':'red','font-size':'40px','font-weight':'bold'});
              獲取單個css的屬性值
              $('選擇器').css('屬性名')
             alert($('div').css('width'))
             alert($('div').css('height'))

二.jquery操作屬性的方法

jquery的操作屬性其原理還是對於dom的操作
通過對象的關係,對節點樹中的元素的屬性進行操作的方法有以下:
addClass()該方法向被選中的元素添加一個或者多個類
removeClass()該方法從被選中的元素移除一個或者多個類
attr()該方法設置或者返回被選中元素的屬性值
removeAttr()該方法從被選中的元素中移除屬性
hasClass()該方法檢查被選中的元素是否包含指定class
toggleClass()該方法對被選中元素進行添加/刪除類的切換操作
設置內容:
text()該方法返回或者設置被選中的元素的文本內容
html()該方法返回或者設置被選中的元素的內容(類似innerHtml 可以包含HTML標籤)
val()該方法返回或者設置被選中元素的值

ex;
$(document).ready(function(){
    $('p').addClass('box main')  //d多個類,用空格隔開
    $('p').removeClass('box main')
     alert($('p').attr('title'))
    $('p').attr('title','你好')
alert($('p').attr('title'))
$('p').remove()
$('button').click(function(){
    $('img').removeAttr('src')
})
$('button').click(function(){
   alert($('div').hasClass('one'));
  
})
$(document).ready(function(){
$('button').click(function(){
$('span,b,p').toggleClass('bb')
alert($('p').text())
$('b').text('flow')
alert($('p').html())
$('p').html('<h1>hel</h1>')
alert($('input').val())
$('input').val('我是被修改的值')

三.jquery事件函數
1. ready()當我們的DOM已經加載,頁面已經架在你玩,觸發的事件= =js的onload
語法:
  $(document).ready(function(){
})
備註:不能與<body onlad="">一起使用
blur()當元素失去焦點= =onblur
focus()當元素獲得焦點
change()當元素的值發生改變的時候
click()點擊事件
dblclick()雙擊事件
mouseover()當鼠標指針位於元素上方時會發生mouseover事件
mouseenter()當鼠標指針穿過元素時會發生mouseenter事件
mousemove()當鼠標指針在指定的元素中移動時,就會發生該事件
mouseleave()當鼠標指針離開元素時
mouseout()當鼠標指針從元素上移開時
mousedown()當鼠標指針移動到元素上方并按下鼠標按鍵時
mouseup()當再元素上鬆開鼠標按鍵時
resize()當調整當前瀏覽器窗口大小時
pagex()屬性是鼠標指針的位置,相對於文檔的左邊緣event.pagex event:必須 參數來自事件綁定函數
pagey()屬性鼠標指針的位置,相對於文檔的上邊緣event.pagey event:必須 參數來自事件綁定函數

ex;
  $(document).ready(function(){
      $('input').blur(function(){
          $('input').css('background','red')
      })
      $('input').focus(function(){
          $('input').css('background','green')
      })
     $('input').change(function(){
         $('input').css('background','plum')
     })
$('button').click(function(){
     $('div').css('background','yellow')
})


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送