python学习第十四课－－ JQUERY

选择器

#id    element   classname

$(“#id”)  = $(document.getElementById(“id”)

对于多个classname, 要找到某一个，如

<style>

    .abc {background-color: #0000FF}

</style>

<div class=”abc”>hello</div>

<div class=”abc”>hello</div>

<div class=”abc”>hello</div>

使用

<script>

    $(function(){

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

    })

</script>

能够找到第二个并把它底色改变

$(".abc").get(1) 是找到第二个class为abc的html 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}) 能够设置div的css的属性

         还可使用函数,如：

         $(“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  获得第一个div的top值

                  $('div:first').offset({top:100,left:8}) 设置第一个div的top  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,select和button元素

: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() 返回的是键码keyCode，keypress()返回的是字符编码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()