jQuery的概述
什么是JQuery
jQuery是一个轻量级的JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多(validation校验,BootStrap)。 实际开发中更常用的其实是jQuery;
核心理念:write less,do more
jQuery的引入
学习jQuery只需要将对应js库下载,并导入到我们项目下,在html页面使用<script>
导入
为了保证兼容性,一般用1.11.0或者1.8.3;越新的版本对于ie6/7/8不兼容。
引用的方式和我们的js外部引用是一样的。
<script src="../js/jquery-1.11.0.js" type="text/javascript" >
</script>
下述的这两个js文件其实是一样的,但是含有min的没有良好的格式,却有较小的文件大小。如果要研究源码,就用没有min的文件,如果是项目上线,就用含有min的即可。
jQuery的几个注意要点:
1)jQuery中都是调用方法,而js中是设置属性。
比如,在jQuery中,设置属性的时候不能够用 .value ,需要用 val( ) 函数
比如,js中的innerHTML属性在jQuery中需要用html()函数来替代。
jQuery底层也是js写的。
2)jQuery的对象命名最好加一个$符号用于区分js对象和其他对象,让人一看到就知道这是个jQuery对象。
3)jQuery对象不能够调用js的方法和属性。
但jQuery中也有length属性;checked属性。
4)jQuery中获取某个属性的话就只调用某个方法或者只传入属性名参数,要设置的话就在方法中传入参数。
5)this是js的对象,在jQuery中需要转换成为jQuery对象。$(this);
6)jQuery中的对象数组具有自动遍历功能。这是写在了框架里面的。
下述写法没有问题。
var $x = $("form ~ input");
$x.val("hhaha");
在一个jQuery对象数组的外层加上一个alert()函数的时候,不能够打印出数组中每个对象的值,因为alert是不带有遍历功能的,只有jQuery对象数组才有自动遍历的功能,最后只能打印出第一个元素的值。
var $x = $("form ~ input");
alert($x.val());
7)jQuery中的属性操作:
jQuery的整体印象:
var $bt = jQuery("#btn");
$bt.click( function() {
$bt.val("按钮1");
})
其实,上述案例中的jQuery(“#btn”),就相当于$(“#btn”)
var $bt = $("#btn");
$bt.click( function() {
$bt.val("按钮1");
}
基本语法/对象获取
在js中document.getElementById(“id”);还有通过tagName等等获取对象
而在jQuery中,获取jQuery的对象格式如下:
第一种方式:
jQuery(选择器)
第二种方式:
$(选择器)在jQuery中,”jQuery == $”,区分大小写
jQuery中对象变量命名建议以&开头,便于区分。
比如通过id找到某个标签对象,
var $demoId = $("#demoId");
- jQuery中的注释和js中一样: // /* */
jQuery的基本操作
jQuery页面加载
- $(document).ready(当页面加载完成时要执行的函数)
可以执行多次,且比js中的onload方法速度快。 更加简版的写法:$(当页面加载完成时要执行的函数)
简便写法:文档加载完成的时候执行,且可以执行多次。也就是写多个。
<script>
$( function(){
})
</script>
原型:
<script>
$(document).ready( function () {
})
</script>
js中onload和jQuery中的ready方法的区别:
1)jQuery中的ready函数可以执行多次。而onload只能够执行一次
2)jQuery中的ready函数是在文档加载完毕的时候执行的,而onload是在窗体加载完成的时候执行的。所以ready函数执行是在onload之前执行的。在所有的ready执行完成之后onload才会执行。
js对象和jQuery对象相互转换
- 把jQuery对象
($q)
转换成js对象
$q[0]
$q.get(0)
- 把js对象(p)转换成jQuery对象:括号不可以省略
$(p)
css中的选择器是
书写规范:
<style>
选择器 {
属性名:属性值;
color: red;
font-size: 40px;
}
</style>
js中是通过函数,并在函数中传入参数来获取来获取,getElementById(),getElementsByTagName()
jQuery中的选择器都存在“”,这点不能够省略
jQuery的三种基本选择器
- ID选择器:$(“#id名”) 注意引号不能够省略。
- 类选择器:$(“.类名”)
- 元素选择器:$(“标签名” )
jQuery的其他选择器
1)层级选择器:
$(“A B”)
获取A元素内部的所有的B元素,包含内部的所有后代标签(祖孙关系)
$(“A > B”)
获取A元素下面的所有B元素,仅仅包含子元素,不包含孙子元素
$(“A + B”)
获取A元素同级的第一个B元素
$(“A ~ B”)
获取A元素同级的所有B元素
2)基本过滤选择器
* $("选择器:first"),
表示找到所有符合该选择器的第一个元素。
$(function() {
$("tr : first").css("background-color","red");
})
$("选择器:last")
,表示找到所有符合该选择器的最后一个元素。$("选择器:even")
,表示找到所有符合该选择器的下标为偶数的元素。$("选择器:odd")
,表示找到所有符合该选择器的下标为奇数的元素。$("选择器:eq(index)")
,表示找到符合该选择器的第index个元素。$("选择器:gt(index)")
,表示找到符合该选择器的并且下标大于index的所有元素。$("选择器:lt(index)")
,表示找到符合该选择器的并且下标小于于index的所有元素。$(":header")
,找到所有标题元素。$(" : empty")
,找到所有空元素(不包含子元素和文本的元素)
例图:
3)属性选择器
* [属性名p]:获取有属性名p的元素,只要有这个属性,都会被选出来,不管属性值。
* [属性名=属性值]:获取属性名 = 属性值的元素
* [属性名 != 属性值]:获取属性名 != 属性值的元素,属性值用单引号括起来
* […][…][…]多重属性选择器
* [属性名^=属性值]:获得 属性名 以属性值开头的所有元素
* [属性名$=属性值]:获得 属性名 以属性值结尾的所有元素
* [属性名*=属性值]:获得 属性名 含有属性值的所有元素
案例:
含有class属性的都会被选择出来
含有type属性且同一属性的才会被选择出来。
表单类型选择器
表单属性选择器(在用于筛选出已经选择的表单select中的option时用得到。)
如果select表单中被选中的,也就是存在selected属性的,就会被选择器选择出来。
用法有点类似过滤选择器。
$("#add").click(function() {
$("#selectLeft option:selected").each(function(index, element) {
$("#selectRight").append(element);
});
})
$("#remove").click(function() {
$("#selectRight option:selected").each(function(index, element) {
$("#selectLeft").append(element);
});
})
jQuery的事件 绑定
先复习一下js的事件两种绑定方式:
事件的两种绑定方式:
第一种:使用类似onclick这样的属性进行绑定。
第二种:
1先找到按钮2;
2给其绑定点击事件
给bt2的onclick中赋值的时候,只能够赋值为匿名函数,不然会认为是调用fn函数;
jQuery的事件绑定:
方法一:调用jQuery中的方法绑定事件
如下例,本质上是调用jQuery对象的click()函数来绑定事件的。
$("#btn").click( function(){
$("#user").val("李四");
});
再举一个例子,
注意,this是js中的对象,在使用的时候需要转化成为jQuery对象。
$("#btn").mouseover( function (){
$(this).val("change");
})
方法二:利用bind()函数绑定事件
bind(事件类型,函数),通过bind方法可以绑定多个事件
绑定一个函数的时候:
$("#btn").bind("事件类型",function(){
});
$("#btn").bind("click",function(){
//打印改变后的值
alert("hahaha");
});
$("#user").bind("change",function(){
//打印改变后的值
alert("hahaha");
});
change函数要注意,要获取焦点,改变文本,失去焦点才能够触发这个函数,如果是利用函数修改的话,change不会触发。
绑定多个函数的时候:
jason格式,其实里面就是键值对的形式存在的参数。
$("#btn").bind({
click : function(){
$("#user").val("李四");
},
mouserover:function(){
},
mouserout : function(){
},
});
$("#user").bind({
mouseover : function(){
$("#user").val("lisioooo");
},
mouseout : function(){
$("#user").val("change");
}
})
jQuery的效果
显示隐藏 show ,hide, toggle
- show(speed,callback),显示
- speed,速度 ,用毫秒值表示的速度。
- callback,表示显示后要进行的操作(回调) 。这里是传入函数,表示效果完成后的一个反馈或操作。
- hide(speed,callback),隐藏
- toggle(),显示隐藏的切换开关 ,切换某个标签的显示与隐藏
滑动 slideDown、 slideUp、 slideToggle
- slideDown(speed,callback),滑动显示
- slideUp(speed,callback),滑动隐藏
- slideToggle(speed,callback),滑动进行显示隐藏的切换
淡入淡出 fadeIn、 fadeOut、 fadeTo、 fadeToggle
- fadeIn(speed,callback),淡入
- fadeOut(speed,callback),淡出
- fadeTo( speed, opacity, callback),由不透明变成指定的透明度:透明度由0-1表示
- opacity:指定透明度
- fadeToggle(speed,callback),切换淡入淡出
jQuery的属性
- $(selector).attr(attribute):返回指定元素的某个属性值,少用,会存在某种bug
- $(selector).attr(attribute,value):给指定元素设置属性
- $(selector).prop(attribute):返回指定元素的某个属性值
- $(selector).prop(attribute,value):给指定元素设置属性
- html():往标签体中写HTML内容
- val():设置或返回Value属性的属性值
- hasClass(“类名”):指定元素是否包含某个类
- addClass(“类名”):给指定元素添加某个类
实例:
val方法只能够获取和设置内置有value属性的。val()只适用于input和option属性。
$(button_input).click(function() {
$(text_input).val("zhangsan");
})
通用的获取和设置属性
attr()方法。少用,会有一些bug
$(button_input).click(function(){
$(text_input).attr("value","zhangsan");
})
prop方法:
prop方法是jQuery1.6之后提出替换attr方法的。
$(button_input).click(function(){
$(text_input).prop("value","lisi");
})
设置css属性:
.css() 只能用于设置css属性,不能够用于设置value等的值
$("#btn").click(function(){
$("#user").css("background-color","blue");
})
调用一次只能够设置一个属性。如果要添加多个属性,可以为标签添加类名,addClass(“类名”)
addClass(“类名”)方法
给某个标签传入类名
在类名中设置多种格式,然后把这个类添加到某个标签中,这样可以实现添加多个属性。
定时弹广告案例
利用回调