Day05-jQuery01
来源:互联网 发布:dmp怎么导入数据库 编辑:程序博客网 时间:2024/06/07 10:19
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(“类名”)方法
给某个标签传入类名
在类名中设置多种格式,然后把这个类添加到某个标签中,这样可以实现添加多个属性。
定时弹广告案例
利用回调
隔行换色案例
全选和反选的案例
- Day05-jQuery01
- jquery01
- jQuery01
- jquery01
- day05
- Day05
- day05
- day05
- day05
- day05
- day05
- day05
- day05
- day05
- day05
- day05
- day05
- day05
- 如何去掉滚动条但依旧保留滚动效果
- ionic debug and webpack
- 兼容性滚动顶部出现
- android自定义View之零散基础知识
- S5PV210 点亮Led
- Day05-jQuery01
- java虚拟机之Java内存区域与内存溢出异常
- Android Bitmap
- 解决mysql添加用户Field 'ssl_cipher' doesn't have a default value的错误
- C语言单链表的一些操作
- RaspberryPi(树莓派)从U盘启动
- 放置式new
- 大数据-孩子学习成绩分析
- 47、求1+2+3+...+n