jquery总结

Posted 2020-09-07

【选择器】

$("#id"): 根据给定的ID匹配一个元素。

$("dom元素名")：根据给定的元素名匹配所有元素

$(".Class类名"): 根据给定的类匹配元素。

$("dom元素.class类名")：选择所有class属性为指定类名的dom元素。

$(".stripe tr"): 获取class属性为stripe的table元素下的所有行

$("tr:first") 匹配找到的第一个元素

$("tr:last") 匹配找到的最后一个元素

$("input:not(:checked)") 去除所有与给定选择器匹配的元素

$("tr:even") 匹配所有索引值为偶数的元素，从 0 开始计数

$("tr:odd") 匹配所有索引值为奇数的元素，从 0 开始计数

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

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

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

$(":input") 查找所有的input元素

$(":password") 匹配所有密码框

$("text")    匹配所有的单行文本框

$("file")     匹配所有文件域

 

$("input[name=‘newsletter‘]") 查找所有 name 属性是 newsletter 的 input 元素

$("input[name!=‘newsletter‘]") 查找所有 name 属性不是 newsletter 的 input 元素

$("input[name^=‘news‘]") 查找所有 name 以 ‘news‘ 开始的 input 元素

$("input[name$=‘letter‘]") 查找所有 name 以 ‘letter‘ 结尾的 input 元素

$("input[name*=‘man‘]") 查找所有 name 包含 ‘man‘ 的 input 元素

$("input[id][name$=‘man‘]") 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的

$("ul li:first-child") 在每个 ul 中查找第一个 li

$("ul li:last-child")   在每个 ul 中查找最后一个 li

$("input:disabled") 匹配所有不可用元素

$("input:checked") 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

$("select option:selected") 匹配所有选中的option元素

 

【属性操作】

$("img").attr("src"); 返回文档中第一个图像的src属性值。

$("img").attr("src","test.jpg"); 为所有匹配的元素设置一个属性值

$("img").attr("title", function() { return this.src }); 为所有匹配的元素设置一个计算的属性值

$("img").removeAttr("src"); 从每一个匹配的元素中删除一个属性

$("p").addClass("selected"); 为每个匹配的元素添加指定的类名

$("p").removeClass("selected"); 从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开

$("p").removeClass();删除匹配元素的所有类

$("div").html(); 取得第一个匹配元素的html内容

$("div").html("<p>Hello Again</p>"); 设置每一个匹配元素的html内容

$("p").text(); 取得所有匹配元素的内容

$("p").text("<b>Some</b> new text."); 设置所有匹配元素的文本内容

$("#single").val() 获得第一个匹配元素的当前值

$("input").val("hello world!"); 设置每一个匹配元素的值

$("p").filter(".selected") 筛选出与指定表达式匹配的元素集合

 

$("div").children();取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

$("p").find("span");搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("p").next();取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合

$("p").prev();取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

$("div").parent;取得一个包含着所有匹配元素的唯一父元素的元素集合。

$("span").parents;找到每个span元素的所有祖先元素

$("div").siblings();取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

$("p").append("<b>Hello</b>"); 向每个匹配的元素内部尾部追加内容

$("p").after("<b>Hello</b>"); 在每个匹配的元素之后插入内容

$("p").before("<b>Hello</b>"); 在每个匹配的元素之前插入内容

$("p").replaceWith("<b>Paragraph. </b>"); 将所有匹配的元素替换成指定的HTML或DOM元素。

$("p").remove(); 从DOM中删除所有匹配的元素

$("p").empty(); 删除匹配的元素集合中所有的子节点。

 

$("p").css("color"); 取得第一个段落的color样式属性的值

$("p").css("color","red"); 在所有匹配的元素中，设置一个样式属性的值

$("p").height(); 取得第一个匹配元素当前计算的高度值（px）。

$("p").height(20); 为每个匹配的元素设置CSS高度(hidth)属性的值

$("p").width(); 取得第一个匹配元素当前计算的宽度值（px）。

$(window).width(); 获取当前窗口的宽

$("p").width(20); 为每个匹配的元素设置CSS宽度(width)属性的值

 

$("p").show() 显示隐藏的匹配元素

$("p").hide() 隐藏显示的元素

$("p").show("slow"); 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

$("p").hide("slow"); 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数。

 

$("p").fadeIn("slow"); 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数

$("p").fadeOut("slow"); 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

$("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66); 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

 

【事件】

$("p").bind("click", function(){ alert( $(this).text() );}); 为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数

$("p").one("click",function(){alert(${this}.text());}) 当所有段落被第一次点击的时候，显示所有其文本

$("p").blur(); 触发每一个匹配元素的blur事件

$("p").blur( function () { alert("Hello World!"); } ); 在每一个匹配元素的blur事件中绑定一个处理函数

change(fn);在每一个匹配元素的change事件中绑定一个处理函数。

$("p").click(function(){});在每一个匹配元素的click事件中绑定一个处理函数

$("p").dblclick( function () { alert("Hello World!"); }); 

keydown(fn)；在每一个匹配元素的keydown事件中绑定一个处理函数。

keypress(fn)；在每一个匹配元素的keypress事件中绑定一个处理函数。

keyup(fn)；在每一个匹配元素的keyup事件中绑定一个处理函数。

$("form:first").submit();提交本页的第一个表单。

$("form").submit(function(){return false;});阻止页面提交。

 

【ajax，other】

$.get(url, params, callback) 用get方式向远程页面传递参数，请求完成后处理函数，除了url外，其它参数任意选择！

$.post(url, params, callback) 用post方式向远程页面传递参数，请求完成后处理函数callback

$.each(obj,callback); 通用例遍方法，可用于例遍对象和数组。

$.map(array,callback);将一个数组中的元素转换到另一个数组中

$.unique(array);删除数组中重复元素

$.trim(" hello, how are you? "); 去掉字符串起始和结尾的空格

$("form").serialize() ；序列表单内容为字符串，用于 Ajax 请求

$("input[type=‘radio‘]:checked")

 

 

 

 

【常用插件】

 

jquery.fileupload.js 是一个Jquery图片上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示；支持各种动态语言开发的服务器端。

$.ajaxFileUpload ( { url: ‘/upload.aspx‘, //用于文件上传的服务器端请求地址 secureuri: false, //是否需要安全协议，一般设置为false fileElementId: ‘file1‘, //文件上传域的ID dataType: ‘json‘, //返回值类型 一般设置为json success: function (data, status) //服务器成功响应处理函数 { $("#img1").attr("src", data.imgurl); if (typeof (data.error) != ‘undefined‘) { if (data.error != ‘‘) { alert(data.error); } else { alert(data.msg); } } }, error: function (data, status, e)//服务器响应失败处理函数 { alert(e); } } )

 

 

jquery.autoComplete.js 提供的动态检索插件，绑定文本框，当内容发生改变事，触发ajax请求数据，传递给autocomplete展示数据。

$(‘#keyword‘).autocomplete(datas, {

25                     max: 12,    //列表里的条目数

26                     minChars: 0,    //自动完成激活之前填入的最小字符

27                     width: 400,     //提示的宽度，溢出隐藏

28                     scrollHeight: 300,   //提示的高度，溢出显示滚动条

29                     matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示

30                     autoFill: false,    //自动填充

31                     formatItem: function(row, i, max) {

32                         return i + ‘/‘ + max + ‘:"‘ + row.name + ‘"[‘ + row.to + ‘]‘;

33                     },

34                     formatMatch: function(row, i, max) {

35                         return row.name + row.to;

36                     },

37                     formatResult: function(row) {

38                         return row.to;

39                     }

40                 }).result(function(event, row, formatted) {

41                     alert(row.to);

42                 });

 

jquery.validation 表单数据验证框架，内置了对日期，数字，网址，手机号，电子邮件，不能为null，最大长度，最小长度等基本信息的校验配置。

1.引入js

src="<%=request.getContextPath()%>/validate/jquery.validate.min.js"

src="<%=request.getContextPath()%>/validate/jquery.metadata.min.js"

src="<%=request.getContextPath()%>/validate/messages_zh.js"

2. $("#myform").validate();form启用验证

3. 通过表单元素的class设置校验class="required email"

 

jquery block ui 当前端ajax调用的时候，由于数据量不同，处理速度不一样，为了防止用户乱点，需要进行锁屏。

1. $(function(){  
2.         $.blockUI({  
3.          message:"please wait";  
4.      });  
5.           
6.         setTimeout(function(){  
7.             $.unblockUI({  
8.                 //执行解除锁屏的回调函数  
9.                 onUnblock : function(){  
10.                     alert("onUnblockUI");  
11.                 }  
12.             })  
13.         },2000);  
14.     });  

 

jquery fancybox 弹窗插件，丰富弹出层效果，可以加载div，图片。