前端学习之jquery
前端学习之jquery
一 jQuery是什么?
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器
<4>jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
二 什么是jQuery对象?
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html() //意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; //虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象 var variable = DOM 对象 $variable[0]:jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法:$(selector).action()
三 寻找元素(选择器和筛选器)
3.1 选择器
3.1.1 基本选择器
1
|
$( "*" ) $( "#id" ) $( ".class" ) $( "element" ) $( ".class,p,div" ) |
3.1.2 层级选择器
1
|
$( ".outer div" ) $( ".outer>div" ) $( ".outer+div" ) $( ".outer~div" ) |
3.1.3 基本筛选器
1
|
$( "li:first" ) $( "li:eq(2)" ) $( "li:even" ) $( "li:gt(1)" ) |
3.1.4 属性选择器
1
|
$( '[id="div1"]' ) $( '["alex="sb"][id]' ) |
3.1.5 表单选择器
1
|
$( "[type='text']" )----->$( ":text" ) 注意只适用于input标签 : $( "input:checked" ) |
实例之左侧菜单
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
实例之tab切换
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
3.2 筛选器
3.2.1 过滤筛选器
1
|
$( "li" ).eq(2) $( "li" ).first() $( "ul li" ).hasclass( "test" ) |
3.2.2 查找筛选器
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()
四 操作元素(属性,css,文档处理)
4.1 属性操作
--------------------------属性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("").css("color","red")
注意:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
实例之全反选
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
实例之模态对话框
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
4.2 文档处理
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
实例之复制样式条
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
4.3 css操作
CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) 尺寸 $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
实例返回顶部
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
五 事件
页面载入 ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 $(document).ready(function(){}) -----------> $(function(){}) 事件处理 $("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如: // $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定 // click事件; [selector]参数的好处: 好处在于.on方法为动态添加的元素也能绑上指定事件;如: //$('ul li').on('click', function(){console.log('click');})的绑定方式和 //$('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个 //li:$('ul').append('<li>js new li<li>');这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加 //li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用: function myHandler(event) { alert(event.data.foo); } $("li").on("click", {foo: "bar"}, myHandler)
实例之面板拖动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
实例之放大镜
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
六 动画效果
显示隐藏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
滑动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
淡入淡出
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
回调函数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
七 扩展方法 (插件机制)
一 用JQuery写插件时,最核心的方两个方法
<script> $.extend(object) //为JQuery 添加一个静态方法。 $.fn.extend(object) //为JQuery实例添加一个方法。 jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); console.log($.min(3,4)); //-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});
$("p").print();
</script>
二 定义作用域
定义一个JQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
(function(a,b){return a+b})(3,5) (function ($) { })(jQuery); //相当于 var fn = function ($) { }; fn(jQuery);
三 默认参数
定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
八 经典实例练习
实例之注册验证
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
参考:http://www.cnblogs.com/xcj26/p/3345556.html