当前位置:  编程技术>WEB前端

jquery中常用的函数和属性详细解析

    来源: 互联网  发布时间:2014-08-25

    本文导语:  Dom:Attribute:属性$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map$("input").attr({"checked", "checked"}); $("img").attr("title", function() { return this.src }); 给某...

Dom:
Attribute:属性
$("p").addClass(css中定义的样式类型); 给某个元素添加样式
$("img").attr({src:"test.jpg",title:"test Image"}); 给某个元素添加属性/值,参数是map
$("input").attr({"checked", "checked"});
$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值
$("元素名称").html(); 获得该元素内的内容(元素,文本等)
$("元素名称").html("new stuff"); 给某元素设置内容
$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值
$("元素名称").removeClass("class") 给某元素删除指定的样式
$("元素名称").text(); 获得该元素的文本
$("元素名称").text(value); 设置该元素的文本值为value
$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$("input元素名称").val(); 获取input元素的值
$("input元素名称").val(value); 设置input元素的值为value

Manipulation:
$("元素名称").after(content); 在匹配元素后面添加内容
$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面
$("元素名称").appendTo(content); 在content后接元素
$("元素名称").before(content); 与after方法相反
$("元素名称").clone(布尔表达式) 当布尔表达式为真时,克隆元素(无参时,当作true处理)
$("元素名称").empty() 将该元素的内容设置为空
$("元素名称").insertAfter(content); 将该元素插入到content之后
$("元素名称").insertBefore(content); 将该元素插入到content之前
$("元素").prepend(content); 将content作为该元素的一部分,放到该元素的最前面
$("元素").prependTo(content); 将该元素作为content的一部分,放content的最前面
$("元素").remove(); 删除所有的指定元素
$("元素").remove("exp"); 删除所有含有exp的元素
$("元素").wrap("html"); 用html来包围该元素
$("元素").wrap(element); 用element来包围该元素

Traversing:
add(expr)当前匹配元素集合增加新的匹配元素集合‘expr',形成新的匹配元素集合;

例子:

代码如下:

$(document).ready(function(){  
    $("div").css("border", "2px solid red")
                 .add("p")//文档中的P元素会应用背景色为yellow的CSS样式;
                 .css("background", "yellow");  
   });

children(expr)从当前匹配元素集合中得到各个元素第一层子集集合,形成新的元素集合
contains(str) 匹配集合中包含str这个变量文本的元素集合,返回匹配元素集合
end()用于返回到调用 find() 或 parents() 函数(或者其它遍历函数)之前的 jQuery 对象

例子
$("#div1").find("p").hide().end().hide()
第一个hide()是对于p标签的 然后用end()结束对p标签的引用而返回到#div1标签
所以第二个hide()是对于#div1起作用的
如果不加end() 则两个hide()都是对p标签起作用

filter(expression)
find(expr)
filter和find的区别:
filter将在一组已经选取的元素里面选择;
find将在一组已经选取的元素的子节点里面选择;


      

测试1




      

测试2




如果我们使用find()方法:
var $find =   $("div").find(".rain");
alert( $find.html() ) ;
将会输出:测试1
如果使用filter()方法:
var $filter = $("div").filter(".rain");
alert( $filter.html() );
将会输出:测试2

区别在于:
find()会在div元素内 寻找 class为rain 的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作,一个是对自身集合元素筛选。

is(expr)//判断现有集合是否属于‘expr'集合中的一部分或是相等。如果是则返回true,否则返回false

next(expr)//取得一个包含匹配的元素集合中每一个元素紧邻的后面兄弟元素集合。
not(el)//匹配集合中没有满足过滤要求的元素集合

例子:
$("div").not(".green, #blueone")  
$("input:not(:checked) + span")
$('tr:not([th]):odd')

parent(expr)取得一个包含着所有匹配元素的唯一父元素的元素集合
parents(expr)//得到匹配元素集合中各个元素的所有祖先元素集合
prev(expr)得到匹配元素集合中各个元素紧邻的前一个兄弟元素集合
siblings(expr)得到所有匹配元素集合中各个元素的所有兄弟元素集合

Core:
$(html).appendTo("body") 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(function(){……..}); 执行一个函数
$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p,添加样式
$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object) 为扩展jQuery类本身.为类添加新的方法。

举例
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
引用jQuery:

代码如下:

$.min(3,4); //return 3
jQuery.fn.extend(object)给jQuery对象添加方法,是对jQuery.prototype进得扩展

jQuery.fn = jQuery.prototype = {
   init: function( selector, context ) {//.... 
   //......
};


举例
代码如下:

$.fn.extend({       
   alertWhileClick:function(){     
       $(this).click(function(){     
            alert($(this).val());    
        });    
     }    
});

引用jQuery:
$("#input1").alertWhileClick();

jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下,$()查询的是当前HTML文档中的DOM元素。

each( callback ) 以每一个匹配的元素作为上下文来执行一个函数

举例:1

代码如下:

$("span").click(function){
$("li").each(function(){
$(this).toggleClass("example");
});
});

举例:2
代码如下:

$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});

jQuery Event:事件

ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行。在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行。

例子:
$(document).ready(function(){alert("aa");}

bind( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。可能的事件type属性有:blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,keyup, error

例子1:
$('#myBtn').bind("click",function(){   
alert('click');
});

例子2:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

one( type, [data], fn ) 为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
type(String) : 事件类型。
data(Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象。
fn(Function) : 绑定到每个匹配元素的事件上面的处理函数。

trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
$("p").click( function (event, a, b) {
   // 一个普通的点击事件时,a和b是undefined类型
   // 如果用下面的语句触发,那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]); toggle( fn, fn ) 如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);

例子:
$("p").bind("myEvent", function (event, message1, message2) {
   alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
unbind( [type], [data] ) 反绑定,从每一个匹配的元素中删除绑定的事件。
$("p").unbind() 移除所有段落上的所有绑定的事件
$("p").unbind( "click" ) 移除所有段落上的click事件

例子:

代码如下:

var foo = function () {
   // 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发函数foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo

hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
);


元素事件列表说明
注:不带参数的函数,其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件描述,支持元素或对象
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
   if($("#in").val()=='关键字'){
   $("#in").val("")};
}).blur(function(){
   if($("#in").val()==''){
   $("#in").val("关键字").css("color","#ccc")};
});
change( ) 用户改变域的内容 input, textarea, select
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
$("input[type='text']").change( function() {
   // 这里可以写些验证代码
});
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window

JQuery Ajax 方法说明:

load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});

jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});

jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});

jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。

ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("

  • Request Complete.
  • ");
    });
    ajaxError( callback ) 当一个AJAX请求失败后,执行一个函数。这是一个Ajax事件
    $("#msg").ajaxError(function(request, settings){
    $(this).append("
  • Error requesting page " + settings.url + "
  • ");
    });
    ajaxSend( callback ) 在一个AJAX请求发送时,执行一个函数。这是一个Ajax事件
    $("#msg").ajaxSend(function(evt, request, settings){
    $(this).append(" *") 子选择器,选择parent的所有子节点
    $("label + input") 临选择器,选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

    $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

    基本过滤选择器
    $("tr:first") 匹配第一个选择的元素
    $("tr:last") 匹配最后一个选择的元素
    $("input:not(:checked) + span")从原元素集合中过滤掉匹配selector的所有元素(这里有是一个临选择器)
    $("tr:even") 匹配集合中偶数位置的所有元素(从0开始)
    $("tr:odd") 匹配集合中奇数位置的所有元素(从0开始)
    $("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
    $("td:gt(4)") 匹配集合中指定位置之后的所有元素(从0开始)
    $("td:gl(4)") 匹配集合中指定位置之前的所有元素(从0开始)
    $(":header") 匹配所有标题
    $("div:animated") 匹配所有正在运行动画的所有元素

    内容过滤选择器
    $("div:contains('John')") 匹配含有指定文本的所有元素
    $("td:empty") 匹配所有空元素(只含有文本的元素不算空元素)
    $("div:has(p)") 从原元素集合中再次匹配所有至少含有一个selector的所有元素
    $("td:parent") 匹配所有不为空的元素(含有文本的元素也算)
    $("div:hidden") 匹配所有隐藏的元素,也包括表单的隐藏域
    $("div:visible") 匹配所有可见的元素

    属性过滤选择器
    $("div[id]") 匹配所有具有指定属性的元素
    $("input[name='newsletter']") 匹配所有具有指定属性值的元素
    $("input[name!='newsletter']") 匹配所有不具有指定属性值的元素
    $("input[name^='news']") 匹配所有指定属性值以value开头的元素
    $("input[name$='letter']") 匹配所有指定属性值以value结尾的元素
    $("input[name*='man']") 匹配所有指定属性值含有value字符的元素
    $("input[id][name$='man']") 匹配同时符合多个选择器的所有元素

    子元素过滤选择器
    $("ul li:nth-child(2)"),
    $("ul li:nth-child(odd)"), 匹配父元素的第n个子元素
    $("ul li:nth-child(3n + 1)")

    $("div span:first-child") 匹配父元素的第1个子元素
    $("div span:last-child") 匹配父元素的最后1个子元素
    $("div button:only-child") 匹配父元素的唯一1个子元素

    表单元素选择器
    $(":input") 匹配所有的表单输入元素,包括所有类型的input, textarea, select 和 button
    $(":text") 匹配所有类型为text的input元素
    $(":password") 匹配所有类型为password的input元素
    $(":radio") 匹配所有类型为radio的input元素
    $(":checkbox") 匹配所有类型为checkbox的input元素
    $(":submit") 匹配所有类型为submit的input元素
    $(":image") 匹配所有类型为image的input元素
    $(":reset") 匹配所有类型为reset的input元素
    $(":button") 匹配所有类型为button的input元素
    $(":file") 匹配所有类型为file的input元素
    $(":hidden") 匹配所有类型为hidden的input元素或表单的隐藏域

    表单元素过滤选择器
    $(":enabled") 匹配所有可操作的表单元素
    $(":disabled") 匹配所有不可操作的表单元素
    $(":checked") 匹配所有已点选的元素
    $("select option:selected") 匹配所有已选择的元素

    JQuery CSS 方法说明

    css( name ) 访问第一个匹配元素的样式属性。
    css( properties ) 把一个"名/值对"对象设置为所有匹配元素的样式属性。
    $("p").hover(function () {
    $(this).css({ backgroundColor:"yellow", fontWeight:"bolder" });
    }, function () {
    var cssObj = {
    backgroundColor: "#ddd",
    fontWeight: "",
    color: "rgb(0,40,244)"
    }
    $(this).css(cssObj);
    });
    css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
    offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,
    top和left,属性值为整数。这个函数只能用于可见元素。
    var p = $("p:last");
    var offset = p.offset();
    p.html( "left: " + offset.left + ", top: " + offset.top );
    width( ) 取得当前第一匹配的元素的宽度值,
    width( val ) 为每个匹配的元素设置指定的宽度值。
    height( ) 取得当前第一匹配的元素的高度值,
    height( val ) 为每个匹配的元素设置指定的高度值。

    JQuery Utilities 方法说明
    jQuery.browser
    .msie 表示ie
    jQuery.browser.version 读取用户浏览器的版本信息
    jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于W3C CSS的盒模型
    jQuery.isFunction( obj ) 检测传递的参数是否为function
    function stub() { }
    var objs = [
    function () {},
    { x:15, y:20 },
    null,
    stub,
    "function"
    ];
    jQuery.each(objs, function (i) {
    var isFunc = jQuery.isFunction(objs[i]);
    $("span:eq( " + i + ")").text(isFunc);
    });
    jQuery.trim( str ) 清除字符串两端的空格,使用正则表达式来清除给定字符两端的空格
    jQuery.each( object, callback ) 一个通用的迭代器,可以用来无缝迭代对象和数组
    jQuery.extend( target, object1, [objectN] ) 扩展一个对象,修改原来的对象并返回,这是一个强大的实现继承的工具,这种继承是采用传值的方法来实现的,而不是JavaScript中的原型链方式。
    合并settings和options对象,返回修改后的settings对象
    var settings = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    jQuery.extend(settings, options);

    合并defaults和options对象,defaults对象并没有被修改。options对象中的值代替了defaults对象的值传递给了empty。

    代码如下:

    var empty = {}
    var defaults = { validate: false, limit: 5, name: "foo" };
    var options = { validate: true, name: "bar" };
    var settings = $.extend(empty, defaults, options);
    jQuery.grep( array, callback, [invert] ) 通过一个筛选函数来去除数组中的项
    $.grep( [0,1,2], function(n,i){
    return n > 0;
    });

    jQuery.makeArray( obj ) 将一个类似数组的对象转化为一个真正的数组
    将选取的div元素集合转化为一个数组
    var arr = jQuery.makeArray(document.getElementsByTagName("div"));
    arr.reverse(); // use an Array method on list of dom elements
    $(arr).appendTo(document.body);
    jQuery.map( array, callback ) 使用某个方法修改一个数组中的项,然后返回一个新的数组
    jQuery.inArray( value, array ) 返回value在数组中的位置,如果没有找到,则返回-1
    jQuery.unique( array ) 删除数组中的所有重复元素,返回整理后的数组

        
     
     

    您可能感兴趣的文章:

  • jquery中map函数与each函数的区别实例介绍
  • jQuery.proxy向函数中传参的小例子
  • 关于jquery中全局函数each使用介绍
  • jQuery setTimeout()函数的用法介绍
  • jquery的focus函数用法示例
  • jquery浏览器判断函数代码
  • jQuery学习笔记之jQuery构建函数的7种方法
  • JQuery在页面加载完成时执行函数的示例代码
  • 从零学jquery之如何使用回调函数
  • jquery中ajax函数执行顺序问题之如何设置同步
  • jquery 字符串切割函数substring的用法说明
  • jQuery 自定义函数的三种方法(示例)
  • jquery map函数的用法
  • jquery toggle()函数实例解析
  • jquery序列化表单以及回调函数的使用示例
  • jQuery的animate函数学习记录
  • Jquery中"$(document).ready(function(){ })"函数的使用详解
  • jquery中的animate函数
  • jquery animate动画函数用法浅析
  • jQuery filter函数使用方法
  • jquery修改属性值实例代码(设置属性值)
  • jQuery学习笔记之jQuery原型属性和方法
  • 使用jQuery设置disabled属性与移除disabled属性
  • JS与jquery自定义属性用法
  • JQuery 判断某个属性是否存在hasAttr用法
  • jQuery获得内容与属性方法
  • jQuery获得内容和属性示例代码
  • jQuery获得内容和属性方法及示例
  • jquery easyUI创建分组属性编辑器
  • WEB前端 iis7站长之家
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery代码-如何使用jQuery来解析xml
  • jQuery的RSS解析器 jFeed
  • jQuery 解析和显示 RSS 订阅插件 FeedEk
  • jquery 删除字符串最后一个字符的方法解析
  • jquery解析xml字符串简单示例
  • 解析:为jquery的ajax传递url的方法与注意事项
  • 解析prototype,JQuery中跳出each循环的方法
  • Jquery控制只能输入数字(解析)
  • jquery解析多维Json格式数据的例子
  • jquery .attr()与.prop()用法解析
  • jquery解析XML字符串和XML文件的方法说明
  • jQuery中delegate和on的用法与区别详细解析
  • jquery JSON的解析方式示例介绍
  • jquery遍历筛选数组与遍历解析json对象
  • 解析jquery中的ajax缓存问题
  • jquery解析JSON数据示例代码
  • jQuery解析JSON数据实例详解
  • jquery中JSON解析方式例解
  • jQuery中bind,live,delegate与one方法的用法及区别解析
  • jQuery.event兼容各浏览器的event详细解析
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3