jQuery第一天

jquery的概述

什么是JQuery

jQuery是一个JavaScript框架。它兼容CSS3,还兼容各种浏览器。文档说明很全,应用详细,成熟插件多。

核心理念:write less,do more

jQuery的引入

学习jQuery只需要将对应js库下载,并导入到我们项目下,在html页面使用script标签导入<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>

基本语法/对象获取

  • 在js中document.getElementById("id");还有通过tagName等等获取对象

  • 在jQuery中,jQuery(选择器)或者$(选择器)

    • 在jQuery中,"jQuery == $",区分大小写

    • jQuery中对象变量命名建议以$开头,便于区分。

    • 比如通过id找到某个标签对象,var $demoId = $("$demoId");

  • jQuery中的注释和js中一样。

jQuery的基本操作

jQuery页面加载

  • $(document).ready(当页面加载完成时要执行的函数),可以执行多次,且比js中的onload方法速度快。

  • 更加简版的写法:$(当页面加载完成时要执行的函数)

js对象和jQuery对象相互转换

  • 把jQuery对象()转换成对象:q[0]或者$q.get(0)

  • js对象p转换成jQuery对象:$(p)

jQuery的基本选择器(重要)

  • ID选择器:$("#id名")

  • 类选择器:$(".类名")

  • 标签选择器:$(标签名)

jQuery的事件(重要)

  • 直接调用jquery对象的方法进行绑定

    • 点击事件是click()方法

    • 域的内容改变事件是change()方法

  • bind(事件类型,函数),通过bind方法可以绑定诸多事件

jQuery的效果(一般)

显示隐藏
  • show(speed,callback),显示

    • speed,速度

    • callback,表示显示后要进行的操作(回调)

  • hidden(speed,callback),隐藏

  • toggle(),显示隐藏的切换开关

滑动
  • slideDown(speed,callback),滑动显示

  • slideUp(speed,callback),滑动隐藏

  • slideToggle(speed,callback),滑动进行显示隐藏的切换

淡入淡出
  • fadeIn(speed,callback),淡入

  • fadeOut(speed,callback),淡出

  • fadeTo(speed,opacity,callback),由不透明变成指定的透明度:透明度由0-1表示

    • opacity:指定透明度

  • fadeToggle(speed,callback),切换淡入淡出

定时弹广告案例

	$(function(){
                    //1.书写显示广告图片的定时操作
		    time =setInterval("showAd()",3000);	
	            });

	           //2.书写显示广告图片的函数
		   function showAd(){
		   //3.获取广告图片,并让其显示
		   $("#img2").slideDown(3000);  
		  //4.清除显示图片定时操作
	          clearInterval(time);
		 //5.设置隐藏图片的定时操作
                  setInterval("hiddenAd()" ,3000);
			}
			function hiddenAd(){
				$("#img2").silidUp();
				clearInterval(time);
				setInterval("showAd()" ,3000);
			}

jQuery的其它选择器总结(了解)

学习这么多jQuery的选择器的目的是:更快、更方便地找到想找的标签

层级选择器
  • $("A B"):获得A元素内部的所有B元素,包含内部的所有后代标签(祖孙关系)

  • $("A>B"):获取A元素下面的所有B子元素。(父子关系)

  • $("A+B"):获取A元素同级的一个B元素。(兄弟)

  • $("A~B"):获取A元素同级的所有B元素。(兄弟们)

基本过滤选择器
  • $("选择器:first"),表示找到所有符合该选择器的第一个元素。

  • $("选择器:last"),表示找到所有符合该选择器的最后一个元素。

  • $("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。

  • $("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。

  • $("选择器:eq(index)"),表示找到符合该选择器的第index个元素。

  • $("选择器:gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。

  • $("选择器:lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。

  • $(":header"),找到所有标题元素。

  • $(":empty"),找到所有空元素(不包含子元素和文本的元素)<img/><hr/>

属性选择器
  • [属性名p]:获取有属性名p的元素

  • [属性名='属性值']:获取属性名 = 属性值的元素

  • [属性名 != '属性值']:获取属性名 != 属性值的元素

  • [...][...][...]多重属性选择器

  • [属性名^=属性值]:获得 属性名 以属性值开头的所有元素

  • [属性名$=属性值]:获得 属性名 以属性值结尾的所有元素

  • [属性名*=属性值]:获得 属性名 含有属性值的所有元素

表单类型选择器(了解)
表单属性选择器(了解)

jQuery的属性(重要)

  • $(selector).attr(attribute):返回指定元素的某个属性值

  • $(selector).attr(attribute,value):给指定元素设置属性

attr()方法适合用于属性值不是boolean类型的属性

  • $(selector).prop(attribute):返回指定元素的某个属性值

  • $(selector).prop(attribute,value):给指定元素设置属性

prop()方法适合用于属性值是boolean类型的属性

  • html():往标签体中写HTML内容(对应js中的innerHTML属性)

  • text():往标签体中写普通文本(对应js中的innerText属性)

  • val():设置或返回Value属性的属性值

    • 只能用于获取和设置表单项的value属性

  • css():设置css样式

  • hasClass("类名"):指定元素是否包含某个类

  • addClass("类名"):给指定元素添加某个类

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值