jQuery简介

1、什么是jQuery(了解)

jQuery是JS的框架

jQuery是一个轻量的、免费开源的JS函数库

轻量的: 对框架的依赖程度越低, 耦合性越低, 这个框架越轻, 反之, 对框架的依赖程度越高, 耦合性越高, 这个框架就越重。

能够极大的简化JS代码。

jQuery核心思想 “写得更少, 但是做的更多”

2、 jQuery的优势(了解)

能够极大的简化JS代码
能够像css选择器一样方便获取元素

//获取id为div1的元素
document.getElementById("div1");
$("#div1")
//获取class值为one的元素
$(".one")

能够通过修改css属性控制页面的效果

$("div").css("border", "2px solid red");

能够兼容常用的浏览器
谷歌, 火狐, 欧朋, 苹果

3、引入jQuery

由于jQuery的库文件就是一个普通的JS文件

所以引入jQuery就是引入一个JS文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="i1" value="" /><input type="button" id="b1" value="按钮1" /><!-- 引入jQuery文件 --><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript">// js中的页面加载完成事件//onload = function(){}// jQuery中的页面加载完成事件$(function(){// 通过id选择器得到按钮,给按钮添加事件$("#b1").click(function(){//js中//alert(i1.value);//jQuery中获取文本框的内容alert($("#i1").val());});});</script></body>
</html>

jQuery中的页面加载完成事件：$(function(){});

jQuery中的动态绑定事件：$("#b1").click(function(){});

jQuery中获取文本框的内容：alert($("#i1").val());

4、JavaScript与jQuery的互相转换

把js对象转换为jq对象：
var jq = $(js);

把jq对象转换为js对象（jq对象的本质是一个js的数组）：
var js = jq[0];

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>js与jq转换</title></head><body><input type="text" id="i1" /><input type="button" id="b1" value="js转jq" /><input type="button" id="b2" value="jq转js" /><!-- 引入jQuery文件 --><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript">//给按钮1添加事件$("#b1").click(function() {//得到js对象var js = document.getElementById("i1");//把js对象转换为jq对象var jq = $(js);alert(jq.val());});//给按钮2添加事件$("#b2").click(function() {//得到jq对象var jq = $("#i1");//把jq对象转换为js对象/* jq对象的本质是一个js的数组 */var js = jq[0];alert(js.value);});</script></body>
</html>

5、jQuery的选择器

基本选择器

元素名(标签名)选择器
$(“div”) – 匹配所有的div元素
$(“p”) – 匹配所有的p元素
类选择器
$(".mini") – 匹配所有class值为mini的元素
$(“div.mini”) – 匹配所有class值为mini的div元素
ID选择器
$("#one") – 匹配id为one的元素
分组选择器
$(“div,p,.mini,#one”)
匹配所有的div元素以及所有的p元素, 以及所有class值为mini的元素, 和id为one的元素
任意元素选择器
$("*") 匹配任意元素

层级选择器

后代选择器
$(“div span”) – 匹配div内部的所有span元素
子元素选择器
$(“div>span”) – 匹配div内部的所有span子元素
相邻兄弟选择器
$("#two+span") – 匹配id为two的元素后面紧邻的span兄弟元素
$("#two~div")
匹配id为two的元素后面所有的div兄弟元素

层级相关方法

$("#two").siblings(“div”)
匹配id为two的元素前后所有的div兄弟元素

$("#two").prev(“div”)
匹配id为two的元素前面的一个div兄弟元素

$("#two").prevAll(“div”)
匹配id为two的元素前面所有的div兄弟元素

$("#two").next(“div”)
匹配id为two的元素后面的一个div兄弟元素

$("#two").nextAll(“div”)
匹配id为two的元素后面所有的div兄弟元素

$("#two").parent()
匹配id为two的元素的父元素

$("#two").children(“div”)
匹配id为two的元素的子元素

过滤选择器

:first
$(“div:first”) – 匹配所有div中的第一个div
:last

$(“div:last”) – 匹配所有div中的最后一个div
:eq(n)
$(“div:eq(n)”) – 匹配所有div中第n+1个div，即下标等于n的元素
$(“div:eq(0)”) – 匹配所有div中的第一个div
$(“div:eq(-1)”) – 匹配所有div中的最后一个div
$(“div”).eq(0) – 匹配所有div中的第一个div
:not()
$(“div:not(.abc)”) 匹配所有div中class值不等于abc的元素
:even
$(“div:even”) 匹配所有div中下标为偶数的元素
odd
$(“div:odd”) 匹配所有div中下标为奇数的元素
:lt(n)
$(“div:lt(n)”) 匹配所有div中下标小于n的元素
:gt(n)
$(“div:gt(n)”) 匹配所有div中下标大于n的元素

内容选择器

$(“div:has§”) 匹配包含p子元素的div
$(“div:empty”) 匹配空的div
$(“div:parent”) 匹配非空的div
$(“div:contains(‘xxx’)”) 匹配包含xxx文本的div

可见选择器

$(“div:hidden”) 匹配所有不可见（隐藏）的div
$(“div:visible”) 匹配所有可见div

隐藏显示相关方法

$("#abc").show() 让元素显示
$("#abc").hide() 让元素隐藏
$("#abc").toggle 让元素显示隐藏状态反转，显示的隐藏，隐藏的显示

属性选择器

$(“div[id]”) 匹配包含id属性的div，匹配包含某个属性的某个标签
$(“div[id=‘xxx’]”) 匹配id属性为xxx的div
$(“div[id!=‘xxx’]”) 匹配id属性不为xxx的div

子元素选择器

$(“div:first-child”) 匹配是子元素的div，并且第一个
$(“div:last-child”) 匹配是子元素的div，并且是最后一个
$(“div:nth-child(n)”) 匹配是子元素的div，并且是第n个（注意n从1开始，不是下标）

表单选择器

$(":input") 匹配表单中所有的控件
$(":password") 匹配表单中所有的密码框
$(":radio") 匹配表单中所有的单选
$(":checkbox") 匹配表单中所有的多选
$(":checked") 匹配表单中所有选中的单选、多选、下拉选
$(“input:checked”) 匹配表单中所有选中的单选和多选
$(":selected") 匹配表单中所有选中的下拉选

6、jQuery的循环遍历

通过4，我们知道：jq对象的本质是一个js的数组

所以jQuery提供了遍历jq对象内所以元素的方式：each

切记：变脸jq对象，遍历出来的是其本质数组中存放的js对象

其中，遍历时，用this代表遍历数组中的当前遍历到的js对象

     //弹出所有 :checked 元素的value值" id="b4"$("#b4").click(function() {//          var arr = $(":checked");
//          for(let i=0;i<arr.length;i++){//              alert(arr[i].value);
//          }//jQuery提供了遍历jq数组的方法//上述可以缩写为$(":checked").each(function(){//this代表遍历数组中的当前遍历到的js对象alert(this.value)});});

7、通过jQuery增加元素对象

创建元素对象

js中： var d = document.createElement(“div”);

jq中： var d = $("<div id=‘xxx’>abc</div>");

添加到某个元素中

$(“父元素”).append(d); 添加到父元素的最后面

$(“父元素”).prepend(d); 添加到父元素的最前面

插入

$("#abc").before(d); 把d元素插入到id为abc的元素的前面

$("#abc").after(d); 把d元素插入到id为abc的元素的后面

8、通过jQuery删除标签

js中： document.body.removeChild(d); js中我们需要通过父元素删除该子元素

jq中： $("#abc").remove(); 删除id为abc的元素

9、通过jQuery修改标签

修改标签的text 等效innerText
标签对象.text(); //获取
标签对象.text(“xxx”); //修改
修改标签的html 等效innerHTML
标签对象.html(); //获取
标签对象.html(“

xxx

”); //修改
修改标签的css样式
标签对象.css(“color”); //获取
标签对象.css(“color”,“red”) //修改
标签对象.css({“width”:“200px”,“height”:“100px”});批量赋值
修改标签的属性 attribute属性
标签对象.attr(“class”); //获取class的值
标签对象.attr(“class”,“c1”); //修改标签class值为c1

练习

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" /><input type="button" value="添加最后面" /><input type="button" value="添加最前面" /><input type="button" value="插入上海前面" /><input type="button" value="插入上海后面" /><input type="button" value="删除上海" /><ul><li>北京</li><li>上海</li><li>广州</li></ul><!-- 引入jQuery文件 --><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript">$("input:eq(1)").click(function(){//创建一个li对象var li = $("<li></li>");//取出文本框内容var t = $("input:eq(0)").val();//将取出的内容放入li中li.text(t);//将li添加到ul中$("ul").append(li);});$("input[value='添加最前面']").click(function(){var li = $("<li></li>");li.text($("input:first").val());$("ul").prepend(li);});$("input:nth-child(4)").click(function(){var li = $("<li></li>");li.text($("input:first").val());$("li:contains('上海')").before(li);});$("input:eq(4)").click(function(){var li = $("<li></li>");li.text($("input:first").val());$("li:contains('上海')").after(li);});$("input:eq(5)").click(function(){var li = $("<li></li>");li.text($("input:first").val());$("li:contains('上海')").remove();});</script></body>
</html>

用jQuery完成QQ好友分组

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>jq仿QQ好友列表</title></head><body><ul><li>亲戚<ul><li>关三爷</li><li>李大爷</li><li>李二爷</li></ul></li><li>同事<ul><li>马云</li><li>马化腾</li><li>王健林</li></ul></li><li>女朋友们<ul><li>星星</li><li>白晶晶</li><li>亮晶晶</li></ul></li></ul><!-- 引入jQuery文件 --><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript">//拿到2层ul,让它们全部隐藏$("li>ul").hide();//给第一层li绑定点击事件$("body>ul>li").click(function(){//this代表触发事件的元素,是js对象$(this).children().toggle();//把点击的这个之外的隐藏//通过silblings()得到选中的兄弟元素$(this).siblings().children().hide();});</script></body>
</html>

10、获取事件源

事件源：触发事件的标签
在动态绑定的事件方法中，this就是事件源

**注意：**只有动态绑定的事件方法中this代表的才是事件源（触发事件的标签）

获取事件源的方式：
var obj = event.target||event.srcElement;

11、事件模拟

格式：元素对象.trigger(“事件名称”);

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="button" value="点我试试" onclick="alert('试试就试试')" /><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript">//只执行一次的定时器setTimeout(function(){//事件模拟$("input").trigger("click");},3000);</script></body>
</html>

12、hover方法

将鼠标移入移出合并到一个方法中

$(“div”).hover(function(){//当鼠标移入执行
$(this).css(“color”,“red”);
},function(){//当鼠标移出执行
$(this).css(“color”,“green”);
});

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div>hover方法测试</div><div>hover方法测试</div><div>hover方法测试</div><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript">//hover中定义传入两个方法,前面的是鼠标移入时执行,后面的是鼠标移出时执行$("div").hover(function(){//方法一:鼠标移入时$(this).css("color","red");},function(){//方法二:鼠标移出时$(this).css("color","green");});</script></body>
</html>

13、动画相关方法

隐藏 .hide(时间)

显示 .show(时间)

淡出 .fadeOut(时间)

淡入 .fadeIn()

上滑 .slideUp()

下滑 .slideDown()

自定义 .animate({“left”,“1000px”},时间);

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img{width: 600px;height: 400px;position: relative; /* 相对定位 */}</style></head><body><input type="button" value="隐藏" /><input type="button" value="显示" /><input type="button" value="淡入" /><input type="button" value="淡出" /><input type="button" value="上滑" /><input type="button" value="下滑" /><input type="button" value="自定义" /><hr><!-- 水平分割线 --><img src="../imgs/2.gif" /><script type="text/javascript" src="../js/jquery-1.4.2.js"></script><script type="text/javascript">//隐藏动画(第一个参数隐藏的过程时间，第二个参数隐藏完成时执行的方法)$("input:eq(0)").click(function(){$("img").hide(1000,function(){$("img").show(3000);});});//显示动画(第一个参数隐藏的过程时间，第二个参数隐藏完成时执行的方法)$("input:eq(1)").click(function(){$("img").show(1000);});//淡入$("input:eq(2)").click(function(){$("img").fadeIn(1000);});//淡出$("input:eq(3)").click(function(){$("img").fadeOut(1000);});//上滑$("input:eq(4)").click(function(){$("img").slideUp(1000);});//下滑$("input:eq(5)").click(function(){$("img").slideDown(1000);});//自定义$("input:eq(6)").click(function(){$("img").animate({"left":"200px"},500).animate({"top":"200px"},500).animate({"left":"0px"},500).animate({"top":"0px"},500).animate({"width":"800px","height":"500px"},1000).animate({"width":"600px","height":"400px"},1000);});</script></body>
</html>

jQuery框架介绍-简化js相关推荐

jquery ajax 框架有哪些,jquery框架有哪些？jQuery框架介绍
做web开发的小伙伴们应该是经常会用到jQuery框架的,这是目前最流行的js框架之一,小伙伴们知道基于的jQuery框架都有哪些吗?下面小编就带你了解一下吧. 一.jQuery UI框架 Chico ...
jQuery框架介绍
一.jQuery介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库. jQuery可以简便的实现js DOM遍历.操作.事件 ...
jQuery框架简单介绍
jQuery框架介绍 1. jQuery框架与javaScript之间的有什么关系? 2. jQuery与原生javaSript对比,有什么优点? 3. jQuery与javaScript之间的区别是 ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
八款Js框架介绍及比较~转载
Js框架介绍目前来看,JS框架以及一些开发包和库类有如下几个,Dojo .Scriptaculous .Prototype .yui-ext .Jquery .Mochikit.mootools . ...
jQuery框架学习第九天：jQuery工具函数介绍与使用
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架的介绍以及基本用法--操作dom
jQuery框架的介绍以及基本用法–操作dom 概念 jQuery是一个优秀的javascript轻量级框架之一,兼容css3和各大浏览器,提供了dom,events,animate,ajax等简易操 ...
【JQuery框架】JQuery对象和JS对象的区别和转换
目录 jQuery的概念 jQuery快速入门 1.下载jQuery 2.导入JQuery的js文件 3.jQuery的使用 jQuery对象和JS对象区别与转换 jQuery转为js js转为jQu ...
[导入]几种流行的AJAX框架jQuery,Mootools,Dojo,Ext JS的对比
AJAX是web20的基石,现在网上流行几种开源的AJAX框架,比如:jQuery,Mootools,Dojo,Ext JS等等,那么我们到底在什么情况下该使用那个框架?以下是一组摘抄的数据: Aja ...

jQuery框架介绍-简化js