jq---方法总结

1. 什么是jQuery
在使用jQuery之前，我们必须先了解什么是jQuery，它能够干什么(不然我们为啥要用它)。
jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——"Write less，do more"，它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是，它还为我们做了跨浏览器的兼容。绝大多数时候，妈妈再也不用担心我的JS兼容问题了(由于浏览器bug等因素，jQuery也无法100%地实现跨浏览器兼容，官方对这些少数API一般也作了特殊说明，而且这种情况极少遇到，因此可以忽略不计)。
2.版本的区别
jQuery库的js文件一般有两个版本：一个是jquery-version.js(这里的version表示具体版本号，下同)，一个是jquery-version.min.js。
前者是jQuery库的源代码版本，它带有注释信息，建议你在开发环境中使用该文件，以便于调试或阅读源代码。
后者是前者经过压缩处理后的版本，它去除了多余的注释、空白字符等信息，并缩短了变量的名称，以减小js文件的体积。建议你在生产环境中使用该文件，以便于用户浏览器能够更快地加载jQuery库。
3.文档加载完毕后执行的处理函数？
一：$(document).ready(function(){
// 在这里编写我们希望在DOM准备就绪后执行的代码
jQuery的ready()函数可以重复调用
});
二：$( function(){
// 在这里编写我们希望在DOM准备就绪后执行的代码
} );
4.jQuery 核心：选取元素
$("#uid"); // 选取id属性为"uid"的单个元素
$("p"); // 选取所有的p元素
$(".test"); // 选择所有带有CSS类名"test"的元素
$("[name=books]"); // 选择所有name属性为"books"的元素
：针对input元素
// jQuery特有的选择器，当然也可以和其他选择器任意组合使用
$(":checkbox"); // 选取所有的checkbox元素
$(":text"); // 选取所有type为text的input元素
$(":password"); // 选取所有type为password的input元素
$(":checked"); // 选取所有选中的radio、checkbox、option元素
$(":selected"); // 选取所有选中的option元素
$(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)
五：将HTML字符串封装为jQuery对象
// 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作，或者将它们插入到文档的指定位置。
$('<span></span>'); // 包含一个临时的span元素
$('<span/>'); // 包含一个临时的span元素，和上一行代码的作用相同
$('<div id="mydiv"><p class="foo bar">Hello CodePlayer</p></div>'); // 包含一个临时的div元素，其内嵌一个子节点p元素
六：元素的筛选
// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
$("ul li").first(); // 选取ul li中匹配的第一个元素
$("ul li").last(); // 选取ul li中匹配的最后一个元素
$("ul li").slice(1, 4); // 选取第2 ~ 4个元素
$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素
$("div").find("p"); // 选取所有div元素的所有后代p元素
$("div").children(); // 选取所有div元素的所有子代元素
$("div").children("p"); // 选取所有div元素的所有子代p元素
$("span").parent(); // 选取所有span元素的父元素
$("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素
$("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素
$("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素
七：基本方法
// 传入了value参数，设置所有匹配元素的value值为"CodePlayer"
uid.val("CodePlayer");
$lis.attr("class"); // 只获取第一个匹配的li元素的class属性
$("selector").removeAttr("class"); // 移除所有匹配元素的class属性
find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象
children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象
$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"
$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"
$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"
$("selector").prop("checked"); // 获取第一个匹配元素的checked属性值
$("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)
$("selector").removeProp("className"); // 移除所有匹配元素的className属性
八：文档处理
$A.before( $B ); // 在$A之前插入$B
$A.after( $B ); // 在$A之后插入$B
$A.insertBefore( $B ); // 将$A插入到$B之前的位置
$A.insertAfter( $B ); // 将$A插入到$B之后的位置
$A.append( $B ); // 在$A内部的末尾位置追加$B
$A.appendTo( $B ); // 将$A追加到$B内部的末尾位置
$A.prepend( $B ); // 在$A内部的开头位置追加$B
$A.prependTo( $B ); // 将$A追加到$B内部的开头位置
$A.replaceAll( $B ); // 用$A替换$B
$A.replaceWith( $B ); // 用$B替换$A
$A.wrap( $B ); // 在$A的外侧包裹$B
$A.unwrap( ); // 只移除$A的父元素的标签
$A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来
$A.wrapInner( $B ); // 在$A的内侧包裹$B
$A.empty(); // 清空$A的所有内容
$A.remove(); // 删除$A及其绑定的事件、附加数据等
$A.detach(); // 删除$A，但保留其绑定的事件、附加数据等
$A.clone(); // 克隆一个$A
九：动画处理
$("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果
$("selector").show( 400 ); // 显示隐藏的元素，带有400毫秒的过渡动画效果
$("selector").show( "fast" ); // 显示隐藏的元素，带有200毫秒的过渡动画效果
$("selector").show( "slow" ); // 显示隐藏的元素，带有600毫秒的过渡动画效果
$("selector").hide(); // 隐藏显示的元素，其用法与show()相同
$("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似
/* 下面的slide*、fade*系列方法与上面的show()、hide()、toggle()等方法作用相同，
* 用法也类似，只是带有不同的动画效果
*/
$("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果
$("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果
$("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果
$("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果
$("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果
$("selector").fadeToggle(); // 隐藏显示的元素，带有淡出的过渡动画效果
/ 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果
// 动画的执行时间为 1000 毫秒
$("selector").animate( { width: "200px", height: "100px" }, 1000 );
十：事件
// 以下方法均可为所有匹配元素的click事件绑定处理函数
$("selector").click( handler );
$("selector").bind( "click", handler );
$("selector").live( "click", handler ); // 该方法已过时，不建议使用
$(document).delegate( "selector", "click", handler );
$("selector").on( "click", handler );
$("selector").one( "click", handler ); // 用于绑定一次性事件，第一次触发后就自动解除绑定
$dblclick() //双击事件
focus()、聚焦的时候事件
change()、输入域改变的时候
hover()、移入的时候
submit()(仅限于<form>表单元素)
、mousedown()、鼠标按下的事件
mouseover()、移动至元素的时候
keydown()、键盘按下的时候
keypress() 键盘起来的时候
：手机端的事件
// 触发所有匹配元素上的click事件
$("selector").trigger("click");
// 触发所有匹配元素上的change事件
$("selector").trigger("change");
// 触发所有匹配元素上绑定在foo命名空间下的mouseout事件的处理函数
$("selector").trigger("mouseout.foo");
：移除事件
//主要用于解除通过click()、dblclick()等直接事件方法以及bind()、one()等方法绑定的处理函数
$("selector").unbind("click");
//主要用于解除通过live()方法绑定的处理函数
$("selector").die("click");
//主要用于解除通过delegate()方法绑定的处理函数
$(document).undelegate("selector", "click");
//主要用于解除通过on()方法绑定的处理函数
$("selector").off("click");
十一：jQuery辅助工具方法
ar str1 = $.trim( " abc d " ); // "abc d" //去除空格
var str2 = $.trim( null ); // ""
// 判断是否是数组
var isArray1 = $.isArray( [] ); // true
var isArray2 = $.isArray( new Array() ); // true
// 判断是否是函数
var result1 = $.isFunction( function(){} ); // true
var result2 = $.isFunction( new Function() ); // true
// 检索数组中是否存在指定值，并返回其第一次出现的索引
var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3
var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1)
// 将JSON字符串转为对应的JS对象
var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );
var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );
十二：遍历数组
// $.each()用于遍历数组元素或对象属性
var array = [ 12, "jQuery", true ];
$.each( array, function(i, value){
// i 表示当前迭代元素的索引或对象的属性名称
// value 表示当前迭代的数组元素或对象的属性值
// this 与 value 相同
alert( i + " = " + value );
// 如果函数return false，将终止遍历
});
// $.map()用于遍历数组元素或对象属性，并将每次执行遍历函数的返回值封装为数组返回
var obj = { name: "jQuery", age: 20, isAdmin: true };
var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同
// value 表示当前迭代的数组元素或对象的属性值
// i 表示当前迭代元素的索引或对象的属性名称
// this 指向全局对象(window)
if( typeof value === "number"){
return null; // 如果函数返回null或undefined，则不会添加到结果数组中
}else{
return value;
}
} );
// resultArray 为 [ "jQuery", true ]
//$.grep()用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素
var array2 = [ "Hello", 12, "jQuery", true ];
var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同
// value 表示当前迭代的数组元素
// i 表示当前迭代元素的索引
// this 指向全局对象(window)
return i % 2 == 0; // 保留返回值不为false的元素
} );

posted @ 2017-11-13 14:53 蔚京霖阅读(175) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

蔚京霖

选择正确，努力才值得。背后的故事！

jq---方法总结

公告