$()下的常用方法：事件细节

$()下的常用方法：事件细节

ev  

pageX           鼠标坐标    e.pageX — jq中,相对于文档的

                             clientX — js中,相对于可视区（加上滚动条距离=pageX）

which           键盘的键值  e.which — jq中，键盘键值和鼠标键值

                             keyCode — js中，键盘键值

preventDefault  阻止默认事件     

stopPropagation 阻止冒泡操作    return false 阻止默认事件+ 阻止冒泡操作

e.data            事件数据           $("#div1").on('click',{name:'lily'},function(e) { 

                                          alert(e.data.name) })

e.target          当前操作的事件源   $("#div1").on('click',function(e) {
                                          alert(e.target)})

e.type            当前操作的事件类型   $("#div1").on('click',function(e) {      

                                                alert(e.type)})

 

length           元素个数/长度   同js中的length

                 for(vari=0;i<$("li").length;i++){
                     $("li").get(i).style.background='red';

               }

one()            事件只执行一次  $("div").one("click",function(){alert(123)})

offset()          获取一个元素到屏幕的距离   offset().left  offset().top

                 $("div").offset().left

position()       把当前元素转换成类似定位的形式，获取距离到有定位父级的值

               $("div").position().left

parent()         获取父级

offsetParent()   获取有定位的父级                        

val()             取值  val(123) 赋值

size()            取值元素的长度，像length   $("li").size()

each()           加强版的for循环    $("li").each(function(i,elem){ $(this).html(i) })

get()            把jq转成原生js     $("#div").get(0).innerHTML;一组div集合的第一个div 

                           $("#div")[0].innerHTML;与上作用一样$("#div").get(0)==$("#div")[0]

 

outerWidth()   width+padding+border  offsetWidth—原生js，中用法一样$("#div")[0].offsetWidth;

              区别：原生的不能算出display：none元素的offsetWidth值，但是jq可以。                             

innerWidth()   width+padding  原理同上

width()         width   原理同上

text()           获取文本内容不会获取到标签（一组元素所有文本内容）

html()          获取到一组元素中第一个元素的内容（包括文本和标签） 

attr()           返回或设置元素的属性值

prop()          返回或设置元素的属性值   移除属性removeProp()

                使用prop()原则：1只添加属性名称该属性就会生效的应使用prop()

                                2只存在true/false的属性应使用prop()

                                3若是设置disabled和checked这些属性应使用prop()

click()

mousedown()

mousemove()

mouseup()

off()           通常用于移除通过 on() 方法添加的事件处理程序

                 $("button").click(function() { $("p").off("click") })

remove()      删除元素（返回值是这个元素，但没有行为）

detach()       跟remove()方法一样，只不过会保留被删除元素的操作行为

               $("#div").click(function() {
                  alert(123)
             })
             varoDiv=$("#div").detach();
             $("body").append(oDiv)

parents()     获取当前元素所有祖先节点，参数是筛选功能 parents(‘p’)                                                                             

              $("#div").parents('p').css('background','red')

closest(参数)  获取最近的指定祖先节点（包括当前元素自身）必须写筛选的参数，只能找到一个元素

              <bodyclass="box">
                 <divclass="box">点击弹出123</div>

            </body>

            $(".box").closest('body').css('background','red')  //class为box的div背景变红

siblings()    找所有的兄弟节点，参数是筛选功能   siblings('h1')

next()       找下面的兄弟  

nextAll()    找下面的所有兄弟

prev()       找上面的兄弟

prevAll()    找上面的所有兄弟 

parentsUntil()    找祖先元素的节点

nextUntil()  找下面兄弟元素的节点，参数是筛选功能   nextUntil('h1')找下面到h1的所有兄弟元素   没有参数的时候等于nextAll()      

prevUntil()  于上面功能相反

appendTo()  Append()  appendChild()—js    这些方法都是将一个元素剪切之后加到另一个元素里。

              <pid="span">p</p>
            <div  id="div">div</div>    

              $("#span").appendTo($("#div"))

 

              控制台结果

clone()     复制元素， clone（true）—复制元素的行为

add()      元素组合     varelems=$("#div").add($("#span"));
                     elems.css('background','green')

slice(开始下标，结束下标)

serialize()  获取表单提交的值，表单要有name属性，获取的数据为string类型

           $("form").serialize();  //string  a=1&b=2&c=3

serializeArray()同上，获取的数据为对象数组

           $("form").serializeArray();   //对象数组  [

                                                        {name='a',value='1'},
                                                        {name='b',value='2'},
                                                        {name='c',value='3'}
                                                       ]

triggerHandler()主动触发被选元素的指定事件。不会执行浏览器的默认行为，也不会触发事件冒泡。

select()         当textarea或者文本类型的input元素中的文本被选中时发生select事件

after()          被选元素后插入指定的内容    $("p").after("<p>Hello world!</p>");

                <input type="text"value="hello">
              <button>激活input域的select事件</button>
              

              $("input").select(function() {
                  $("input").after("发上input select事件")
              });
              $("button").click(function() {
                  $("input").triggerHandler("select")
              })

keydown()     键被按下

keyup()        键被松开

animate()      运动效果

                第一个参数：{ } 对象，运动的值和属性

                第二个参数：时间  默认400

                第三个参数：运动形式  只有两种默认形式（linear—匀速 ， 默认：swing—慢快慢） 

                第四个参数：回调函数

                ①$(this).animate({width:500,height:500},500,'linear',function() {alert(123) })

                ②$(this).animate({width:400},500,'linear').animate({height:400},500,'linear')

stop()          stop()只阻止当前运动

                stop(true) 阻止后续运动

                stop(true,true) 立即停止到指定目标点

                finish()立即停止到所有指定目标点

delay()         运动延迟    $(this).animate(...).delay(1000).animate(...)

 

 

$下的工具方法  jq和原生js都可用

$.type()        数据类型,比原生的typeof强，能判断出更多的类型

                var a=“hello” var b=[]  var c={}  var d=null  var e=new Date  var f=new RegExp

                $.type(a) — jq中  //string，其他的都能判断出  array  /  object  /  null  /  date  /  regexp

                typeof a — js中   //string，其他的都只能判断出object

$.trim()        去除字符串两端的空白字符

                b="    wenzi   "

              alert("("+$.trim(b)+")")

$.noConflict()  防止冲突

              varmiaov=$.noConflict();
              miaov("body").css('background','red')

$.parseJSON() 将符合标准格式的JSON字符串转变为与之对应的javascript  JSON对象

               注意：传入格式有误的 JSON 字符串可能导致抛出异常。

             varobj =jQuery.parseJSON('{"name":"John"}')
             alert( obj.name==="John")

$.makeArray() 将类数组转成真正的数组

               varoDiv=document.getElementsByTagName("div");  //oDiv 是个类数组
             $.makeArray(oDiv).push()

$.inArray(value,array[,fromIndex])

               在数组中查找指定值并返回它的索引（如果没有找到，则返回-1），返回的值为number类型，数组中找下标位置   类似于indexOf

               varindex=$.inArray("5",["1","8","5","10"])  //index是2

$.proxy()      改变this指向

function  show() {
    alert(this)         //this的指向的是 window
}
show();                 //弹出window
$.proxy(show,document)  //改变this的指向 document   但是这里还没有执行，只是改变了指向相当于show
$.proxy(show,document)()//加（）进行调用，相当于show()  弹出document

 

varobj={
    name:'yy',
    age:'22',
    test:function() {
        $("#div1").after("name:"+this.name+"<br/>age:"+this.age)
    }
};
$("button").click($.proxy(obj,'test'))