jQuery用法小结

悠悠 2023-08-17 16:20 113阅读 0赞

filtering过滤：

.not('') 在所选元素集合中， 排除特定的元素 $( "li" ).not( ":even" ).css( "background-color", "red" );

.filter('') 在所选集合中，选定特定的元素；与.not( )相反； $("p").filter(".selected,:first")选择第一个和带有selected类的p元素；

.eq(num ) num:0 1 2 3 4...

.has(“ul”) $( "li" ).has( "ul" ).css( "background-color", "red" );

.first() .last() $( "li" ).first().css( "background-color", "red" );

.is()检测匹配元素，若其中至少有一个元素符合给定的表达式 返回true;$( "input\[type='checkbox'\]" ).parent().is( "form" )

.map() 操作一个数组中的每个元素 转换为另一个数组

1 $( "p" ).append( $( "input" ).map(function() {
    2 return $( this ).val();
    3 }).get().join( ", " ) );

.slice(0,2) 选取元素集合中 从0开始至2结束的前两个匹配元素；

traversing 遍历：

.end()返回所选文本的上一级；元素

.add() 1添加一个新元素到一组匹配的元素中 $(“p”).add(“span”) 表示已选定p和span元素；

2动态生成一个元素并添加至匹配的元素中

.children()只考虑子元素，而非所有的所有的后代元素；

.closest()从元素本身开始，逐级向上遍历，返回最先匹配的元素；

.parents()从父元素开始向上遍历，返回所有匹配元素，是一个集合。

.offsetParent() 返回第一个匹配的具有position的父元素；

.prev( )取的所选元素的紧邻的前一个同辈元素；

.siblings( )找到所选元素的所有同辈元素；

核心函数

.each() 遍历一个函数集

1  $('li').each(function(index){ 
    2  console.log(index + ':'+$(this).text()); 
    3  })

.index()索引

$('li').index(document.getElementById('bar'))；
    $('li').index($('#bar'))；   //传递一个jquery对象
    $('li').index($('li:gt(0)'))； //传递一组，返回第一个元素的索引位置
    $('#bar').index('li')；  //传递一个选择器，返回＃bar在所有li中的索引位置
    $('#bar').index()；    //不传递参数，返回这个元素在同辈中的索引位置

.size() 相当于$('image').length

.get(0) 返回dom对象 $(this).get(0) 与$(this)\[0\]等价；.get()获得的是元素数组。

.data("blab","hello") 存储数据在blab上

$("form>input") 匹配表单中所有的直接子级input``

$("lable + input") 匹配所有跟在lable后面的元素

$("form ~input") 匹配所有与表单同辈的元素

$("tr:eq(1)") 匹配一个给定索引值的元素

$("tr:gt(1)") 匹配所有大于给定索引值的元素

$("tr:lt(2)") 匹配所有小于索引值的元素

$("div:contains('john')") 查找所有包含‘john’的元素

`$('form').serialize() 将表单内容序列化为字符串，用于ajax请求`

$('select,:redio').serializeArray();序列化表格元素，返回JSON数据结构JSON对象，而非字符串

$.param() 在内部将元素转化为序列化的字符串。$.param(\{width:1900,height:1200\}) ／／*"width=1900&height=1200"*

1 <form>
     2   <select name="single">
     3     <option>Single</option>
     4     <option>Single2</option>
     5   </select>
     6   <select name="multiple" multiple="multiple">
     7     <option selected="selected">Multiple</option>
     8     <option>Multiple2</option>
     9     <option selected="selected">Multiple3</option>
    10   </select><br/>
    11   <input type="checkbox" name="check" value="check1"/> check1
    12   <input type="checkbox" name="check" value="check2" checked="checked"/> check2
    13   <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
    14   <input type="radio" name="radio" value="radio2"/> radio2
    15 </form>
    16 <script type="text/javascript">
    17   $("#results").append("<tt>"+$('form').serialize()+'</tt>');   //结果为single=Single&multiple=Multiple2&check=Check1&check=Check2&radio=radio2
    18 </script>

.submit() 表单的提交事件 若要阻止表单提交 则return false；

.prop()获取匹配的元素中第一个元素的属性值

1 $('input[type="checkbox"]').prop("checked");      //选中为true，否为false；
    2 $('input[type="checkbox"]').prop("disabled",false);     //禁用所有复选框
    3 $('input[type="checkbox"]').prop("checked",true);       //选中所有复选框

.offset().left .offset().top 以像素计算top和left坐标

1 $("p").offset(\{top:10,left:30\});

.position().left .position().top 获得匹配元素相对于父元素的偏移

.scrollTop() 获取相对于滚动条顶部的偏移 .scrollTop(300) 设置

.scrollLeft()

.height() .height(300)

.width() .width(300)

.innerHeight() .innerWidth() 包括padding和内容

.outerHeight() 包括补内容＋padding＋边框； outerHeight() 包括 内容＋padding＋边框＋margin；

.append() .appendTo() .prepend() .prependTo()

.after() 在dd整个元素</p>之后添加元素 .before()

.insertAfter()

.wrap() 把所有匹配的元素用其他元素包裹起来

1 $(".inner").wrap("<div class='new'></div>");
    2 <div class="new">
    3     <div class="inner">Hello</div>
    4   </div>
    5   <div class="new">
    6     <div class="inner">Goodbye</div>
    7   </div>

.unwrap() 移出元素的父元素

.replaceWith() 把所有指定的元素替换成制定的html或dom元素

.empty() 删除匹配的元素集合中所有的子节点

1 $('p').empty(); //<p></p> 里的内容为空

.remove() 删除所有匹配的元素

$("p").remove();  //<p>hello</P> 整个删除

.detach()

.clone() 克隆匹配的dom元素，并选中这个克隆的副本，副本拥有同样的功能

.addSelf()

.contents() 匹配元素内部所有的子节点 元素节点<div> <p>... nodeType ==1;

属性节点 id class name... nodeType == 2;

文本节点 文本内容... nodeType ==3;

注释节点 nodeType == 8;

文档节点 document整个文档 nodeType ==9;

`事件函数`

.on() 在选择元素上绑定一个或多个事件处理函数

1 $('div.test').on({
     2        click:function(){
     3               $(this).toggleClass('active');
     4               },
     5        mouseenter:function(){
     6              $(this).addClass('inside');
     7               },
     8         mouseleave:function(){
     9               $(this).removeClass("inside")
    10               }
    11  });

1 $(p).on('click',\{foo:'bar'\},function()\{\}); 2 $("form").on("submit",false;)//取消提交事件

1 $("body").on("click","p",function(){});

.off() 移除用.on()绑定的事件

.bind() $('form').bind('submit',function()\{return false;\}) 阻止默认事件和事件冒泡；

1 $('form').bind('submit',function(){
    2               return false;    // 取消默认事件和事件冒泡
    3               event.preventDefault();  //只取消默认事件
    4               event.stopPropagation();  //只阻止一个事件冒泡
    5  });

.one() 绑定一个一次性的时间处理函数

.trigger() 在每一个匹配的元素上触发某类事件

1 $("form").trigger("submit");

.delegate() 指定的元素（被选元素的子元素）添加一个或多个事件处理函数；适用于当前或未来的元素（比如脚本创建的元素）

1 $('table').delegate('td','click',function()\{ //div里的td 2 $('p').slideToggle(); 3 \})

.toggle() 切换状态

.blur() 失去焦点时 返回false阻止默认事件

.change() 当元素的值发生改变时，仅适用于input text文本域 textarea 和 select

.keydown() keycode 空格 32 Enter 13 ESC 27

.resize() 调整浏览器窗口的大小时

.scroll() 当指定的元素发生滚动时的事件 $(window).scroll();$('div').scroll();

.select() 当textarea 或input中的文本 被选择时，发生select事件

.animate() 创建自定义动画的函数

1 <script> 
     2 $( "#go" ).click(function() {
     3   $( "#block" ).animate({
     4     width: "70%",
     5     opacity: 0.4,
     6     marginLeft: "0.6in",
     7     fontSize: "3em",
     8     borderWidth: "10px"
     9   }, 1500 );
    10 });
    11 </script>

.stop() 停止指定元素上的所有动画

$("#toggle").on("click",function(){   
                   $(".block").stop().slideToggle(1000);   //及时停止
     });

.finish()

.delay() 设置延迟

$('#foo').slideUp(300).delay(800).fadeIn(400);  //在slideup和fadein之间延时800毫秒

$.trim() 去掉字符串起始和结尾的空格

1 $.trim(" hello, how are you ? "); //'hello, how are you ?'

$.param() 序列化

param()方法 对数组或对象进行序列化，用于在内部将元素值转换为序列化的字符串

.toArray() 转化为数组

$('li').toArray();   //[<li id='foo'>, <li id="bar">]

.nextUntil() $("li .start").nextUntil('li .stop') 选择start和stop两个li 之间的所有同级元素

AJAX

$.ajax(url,\[settings\])

$.ajax(\{

url:'',

beforeSend:function(XMLHttpRequest)\{\},

success:function()\{\},

dataFilter:function(data,type)\{\},在请求成功之后调用，传入返回的数据以及‘dataType'参数的值，

complete:function()\{\},当请求完成之后调用此函数，无论成功失败。传入XMLHttpRequest对象，

error:function()\{\},

dataType:指定不同数据处理方式。除了默认的XML，还可以指定为html,json,jsonp,script,text.,！需要注意的是，我们必须确保服务器报告的MIME类型与我们选择的dataType所匹配。比如说xml的话，服务器必须声明text/xml或者application/xml来获得一致的结果。JSON数据是一种很能方便通过javascript解析的结构化数据。如果获取的文件存放在远程服务器上（域名不同，跨域获取数据），则需要使用JSONP请求。

processData:false,避免在数据发送给时，被默认转换成查询字符串；并且要指定恰当的contentType选项的值，

contentType:MIME类型，默认为application/x-www-form-urlencoded,

cache:false,禁用缓存

ifModified:true,辅助禁用缓存；默认false指仅在服务器数据改变时获取新数据

async:true,默认true异步，

statusCode:\{404:function()\{alert('pafe not found');\}\});

timeout:请求超时时间，

\})

转载于:https://www.cnblogs.com/yxiaoqian/p/5620805.html