每年网站备案抽查,莱芜二中网站,珠海微网站,企业网站空间域名一、jQuery介绍
1.1 jQuery概述
jQuery的概述
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less#xff0c;Do More”#xff0c;即倡导写更少的代码#xff0c;做更多的事情。JQuery封装了JavaScript常用的功能代码#xff0c;提供了一套易于使…一、jQuery介绍
1.1 jQuery概述
jQuery的概述
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write LessDo More”即倡导写更少的代码做更多的事情。JQuery封装了JavaScript常用的功能代码提供了一套易于使用的API可以跨多种浏览器工作使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。
jQuery的作用
访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的jQuery插件与Ajax技术完美结合
jQuery能做的JavaScript也都能做但使用jQuery能大幅提高开发效率
其实jQuery和JavaScript的之间关系可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩而jQuery也是对JavaScript的高度压缩库
jQuery的优势
体积小压缩后只有100KB左右强大的选择器出色的DOM封装可靠的事件处理机制出色的浏览器兼容性
1.2 jQuery框架的下载与引入
jQuery的官方下载 jQuery的官方下载地址http://www.jquery.com
jQuery的版本介绍 1.x兼容IE678使用最为广泛的官方只做BUG维护功能不再新增。因此一般项目来说使用1.x版本就可以了最终版本1.12.4 (2016年5月20日) 2.x不兼容IE678很少有人使用官方只做BUG维护功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x最终版本2.2.4 (2016年5月20日) 3.x不兼容IE678只支持最新的浏览器。除非特殊要求一般不会使用3.x版本的很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本 开发版本与生产版本命名为jQuery-x.x.x.js为开发版本命名为jQuery-x.x.x.min.js为生产版本开发版本源码格式良好有代码缩进和代码注释方便开发人员查看源码但体积稍大。而生产版本没有代码缩进和注释且去掉了换行和空行不方便发人员查看源码但体积很小。
jQuery的引入
在需要使用jQuery的html中使用js的引入方式进行引入如下
script typetext/javascript srcjquery-x.x.x.js/script
jQuery引入成功的测试
关键代码解释
$(function(){ 代码 }) 是指 $(document).ready(function(){}) 的简写 用来在DOM加载完成之后执行一系列预先定义好的函数。
!DOCTYPE html
htmlheadmeta charsetutf-8title/title!-- 引入jQuery --script typetext/javascript src../js/jquery-3.3.1.min.js/script!-- 测试jQuery --script typetext/javascript$(function(){alert(jQuery引入成功....);});/script/headbody/body
/html
1.3 jQuery对象与js对象之间的转换
jQuery本质上虽然也是js但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js方式获得的DOM对象二者的API方法不能混合使用若想使用对方的API需要进行对象的转换。
使用js方式获取的对象是js的DOM对象使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下
js的DOM对象转换成jQuery对象
语法$(js的DOM对象)
jQuery对象转换成js对象
语法jquery对象[索引] 或 jquery对象.get(索引)
代码演示 演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据 演示将js的DOM对象 转换成 jquery对象再使用转换后的jquery对象方式获取div中的数据 演示将jquery对象 转换成 js的DOM对象 再使用转换后js的DOM对象方式获取div中的数据
!DOCTYPE html
htmlheadmeta charsetutf-8title/title!-- 引入jQuery --script typetext/javascript src../js/jquery-3.3.1.min.js/script!-- 测试jQuery --script typetext/javascript$(function(){ //1.演示使用js的DOM对象方式获取div中的文本数据var divEle document.getElementById(myDiv);//js的DOM对象alert(divEle.innerHTML);//js对象的innerHTML属性//1.演示使用jquery对象方式获取div中的文本数据var $divEle $(#myDiv);//jQuery对象alert($divEle.html());//jQuery对象的html方法//2.演示将js的DOM对象 转换成 jquery对象再使用转换后的jquery对象方式获取div中的数据alert($(divEle).html());//转换后正常执行//3.演示将jquery对象 转换成 js的DOM对象 再使用转换后js的DOM对象方式获取div中的数据alert($divEle[0].innerHTML);});/script/headbodydiv idmyDiv通过不同方式获得文本内容/div/body
/html
小结
js的DOM对象转换成jQuery对象 语法$(js的DOM对象) var jsDomEle document.getElementById(myDiv); //js的DOM对象
var $jQueryEle $(jsDomEle); //js的DOM对象 转换成 jquery对象
jQuery对象转换成js对象 语法jquery对象[索引] 或 jquery对象.get(索引) var $jQueryEle $(#myDiv); //jQuery对象
var jsDomEle $jQueryEle[0]; //jquery对象 转换成 js的DOM对象
提示JQuery对象变量名前面的$符号主要作用是便于我们区分该变量是 JsDOM对象 与 jQuery对象并无特殊含义。写$符号代表jQuery对象 是 行业书写规范不加$代码也没有错误。
二、jQuery选择器
2.1 基本选择器 语法
选择器名称语法解释标签选择器元素选择器$(标签名称)获得所有匹配标签名称的于元素id选择器$(#id的属性值)获得与指定id属性值匹配的元素类选择器$(.class的属性值)获得与指定的class属性值匹配的元素
需求 改变 id 为 one 的元素的背景色为红色 改变元素名为 div 的所有元素的背景色为红色 改变 class 为 mini 的所有元素的背景色为红色 改变所有的span元素和 id 为 two 的元素的背景色为红色
实现
script typetext/javascript//input typebutton value改变 id 为 one 的元素的背景色为 红色 idb1/$(#b1).click(function(){$(#one).css(backgroundColor,red);});
//input typebutton value 改变元素名为 div 的所有元素的背景色为 红色 idb2/$(#b2).click(function(){$(div).css(backgroundColor,red);});
//input typebutton value 改变 class 为 mini 的所有元素的背景色为 红色 idb3/$(#b3).click(function(){$(.mini).css(backgroundColor,red);});
//input typebutton value 改变所有的span元素和 id 为 two 的元素的背景色为红色 idb4/$(#b4).click(function(){$(span,#two).css(backgroundColor,red);});
/script
2.2 层级选择器
语法:
重点: 获得A元素内部的所有的B元素$(A B ) 后代选择器(包含子孙) 获得A元素下面的所有B子元素$(A B) 只有儿子没有孙子
了解: 获得A元素同级下一个B元素$(A B) 下一个兄弟 获得A元素同级所有后面B元素$(A ~ B) 后边的所有兄弟 获取A元素的同级B元素: $(A).siblings(B) 获取所有的兄弟
需求 改变body内所有div的背景色为红色 改变body内子div的背景色为 红色
实现
script typetext/javascript//input typebutton value 改变 body 内所有 div 的背景色为红色 idb1/$(#b1).click(function(){$(body div).css(background-color,red);});
//input typebutton value 改变 body 内 子 div 的背景色为 红色 idb2/$(#b2).click(function(){$(bodydiv).css(background-color,red);});
/script
2.3 属性选择器
语法:
重点: 获得有属性名的元素$(A[属性名]) 获得属性名 等于值元素$(A[属性名值]) 复合属性选择器多个属性同时过滤$(A[属性名!值]...[属性名!值])
了解: 获得属性名不等于值元素$(A[属性名!值]) 获得属性名以值开头元素$(A[属性名^值]) 获得属性名以值结尾元素$(A[属性名$值]) 获得属性名含有值元素$(A[属性名*值])
需求: 含有属性title 的div元素背景色为红色 属性title值等于test的div元素背景色为红色 选取有属性id的div元素然后在结果中选取属性title等于“test”的 div 元素背景色为红色
实现:
script typetext/javascript//input typebutton value 含有属性title 的div元素背景色为红色 idb1/$(#b1).click(function(){$(div[title]).css(background-color,red);});//input typebutton value 属性title值等于test的div元素背景色为红色 idb2/$(#b2).click(function(){$(div[titletest]).css(background-color,red);});//input typebutton value选取有属性id的div元素然后在结果中选取属性title等于“test”的 div 元素背景色为红色 idb3/$(#b3).click(function(){$(div[id][titletest]).css(background-color,red);});
/script
2.4 基本过滤选择器
语法: 获得选择的元素中的第一个元素 :first 获得选择的元素中的最后一个元素 :last 不包括指定内容的元素例如 :not(selecter) 偶数从0开始计数 :even 奇数从0开始技术 :odd 指定索引(index)元素 :eq(index) 大于指定索引(index)元素 :gt(index) 小于指定索引(index)元素 :lt(index) 获得标题,固定写法h1 /h2 .... :header
了解: 获得正在执行的动画,固定写法 :animated
需求 改变第一个 div元素的背景色为 红色 改变最后一个 div元素的背景色为 红色 改变class不为 one的所有 div 元素的背景色为 红色 改变索引值为偶数的 div 元素的背景色为 红色 改变索引值为奇数的 div 元素的背景色为 红色 改变索引值为大于3的div元素的背景色为 红色 改变索引值为等于3的div元素的背景色为 红色 改变索引值为小于3的div元素的背景色为 红色 改变所有的标题元素的背景色为 红色
实现
2.5 表单属性选择器
语法: 获得可用元素 :enabled 获得不可用元素 :disabled 获得单选/复选框选中的元素单选radio 多选checkbox :checked 获得下拉框选中的元素下列列表select :selected
需求: 利用 jQuery 对象的 val() 方法改变表单内可用 input 元素的值 利用 jQuery 对象的 val() 方法改变表单内不可用 input 元素的值 利用 jQuery 对象的 length 属性获取多选框选中的个数 利用 jQuery 对象的 text() 方法获取下拉框选中的内容
实现
script typetext/javascript
// input typebutton value 利用 jQuery 对象的 val() 方法改变表单内可用 input typetext 元素的值 idb1/
$(#b1).click(function(){var $input $(input[typetext]:enabled);$input.val(input标签可用文本输入框的值被改变);
});// input typebutton value 利用 jQuery 对象的 val() 方法改变表单内不可用 input typetext 元素的值 idb2/
$(#b2).click(function(){var $input $(input[typetext]:disabled);$input.val(input标签不可用文本输入框的值被改变);
});// input typebutton value 利用 jQuery 对象的 length 属性获取多选框选中的个数 idb3/
$(#b3).click(function(){var $cb $(input[typecheckbox]:checked);alert($cb.length);
});// input typebutton value 利用 jQuery 对象的 text() 方法获取下拉框选中的内容 idb4/
//获取id是b4的按钮对象,增加一个单击事件
$(#b4).click(function(){var $option $(option:selected);alert($option.text());---------------------------------------var $options $(option:selected);for(var i0;i$options.length;i){alert($($options[i]).text());
});
/script
