一 简介
jquery 是一个js类库,其实就是对js常用的方法进行封装，方便我们使用。
二 jquery和html的整合
其实jquery既然是js的类库，那么我们就可以像导入js一样导入jquery
注意：jquery是一个单独的js文件，通过script标签的src属性导入即可。
三 jquery对象的获取
语法：$("选择器") 或者jQuery（“选择器”）
通过以上两种方式都可以获得jq对象。
四 dom对象和jquery对象之间的相互转换
- dom转jquery：
$("dom对象") - jquery转dom(参考下面详细案例)
1 jquery对象[index]
2 jquery对象.get(index)
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
</head>
<body>
<!--
1 jquery 定义
jquery对js常用的方法属性进行封装，方便我们使用。（几乎占据了js的一半）
2 jquery与html 的整合
其实jquery是一个独立的.js 文件 和导入单独的js文件一样，通过Script的src导入即可
3获取Jquery对象
$("选择器") 或者jquery("选择器");
4 dom和jquery的互相转换
dom装换为jquery -》 $(dom 对象)
5 jquery 转dom
两种方式：
a：jquery对象[index]
b: jquery对象.get(index)
-->
username:<input type="text" value ="kate" id="username"/>
</body>
<script>
// jquery 的简单引入及其测试
var $obj = $("#username");
alert($obj.val());
// dom装换为jquery
var $username = $(document.getElementById("username"));
alert("dom 转jQuery"+$username.val())
// jquery 转dom
// 由于使用的是id选择器就一个元素对象故此处使用[0]
var obj = $username[0];
alert("jquery 转dom 方式1"+obj.value);
var obj2 = $username.get(0);
alert("jquery 转dom 方式2"+obj2.value);
</script>
</html>
五 ：与js相同功能的使用
1 页面的加载（onload）
js中：
window.onload=function(){}
jquery中方式1（简写，使用较多）：
$(function(){...})
jquery中方式2（全写）：
$(document).ready(function(){});
js方式与jquery方式的加载有区别：
js方式只能使用一次window.onload=function(){}，如果你在写了个onoad后面的会覆盖前面的方法。然而jquery的都执行，不会覆盖。
code Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
</head>
<body>
<!--
页面的加载：
js方式:
window.onload = function(){}
jquery 方式:
1 简写
$(function(){})
2 全写
$(document).ready(function(){});
注意两种方式的区别： // onload在一个页面中只能使用一次 出现多次的时候回覆盖
jquery 在一个页面中可以使用多次
-->
</body>
<script>
// js方式页面加载：
window.onload = function(){
alert("js方式页面加载1");
}
// 此处的方法会覆盖上面的方法 而使用jQuery就不覆盖
// window.onload = function(){
// alert("页面加载2");
// }
// jquery方式
$(function(){alert("Jquery 方式页面加载1")});
$(function(){alert("Jquery 方式页面加载2")});
$(function(){alert("Jquery 方式页面加载3")});
// 无论出现几个都不会覆盖的（此处执行了三遍）
</script>
</html>
2 事件的派发
js的事件派发：
// dom 方式
dom对象.onclick=function(){....}
jquery的事件派发;
$("选择器").click(function(){...});
jq中其他事件：
focus
blur
submit
change
click
补充：$("选择器").html 往标签提内写内容
两者之间的细小区别：jquery吧以前的事件的on去掉，吧函数作为参数传递就行。
其他事件一样。
代码测试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
</head>
<body>
<!--
方式jquery 的事件派发 和dom一样类似
dom 的方式为：
dom对象.onclick = function(){}
jquery的方式：
jquery对象.click(function(){})
两者对比： 只是jquery吧onclick 的on去掉了就这个小差别
-->
<input type="button" value="kate" id="btn" />
</body>
<script>
// dom 方式事件派发
document.getElementById("btn").onclick = function(){
alert("dom 方式的事件派发");
}
// 方式jquery 事件派发
$("#b").click(function(){
alert("jquery方式的事件");
})
</script>
</html>
六 jquery中的动画效果
jquery中效果:(jq对象调用即可)
- 隐藏或展示
show(毫秒数) hide(毫秒数) - 滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出 - 淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: #FF0000;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
</head>
<body>
<!--
作者：1246771571@qq.com
时间：2018-11-01
描述：
jquery中效果:
隐藏或展示
show(毫秒数) hide(毫秒数)
滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数):向上滑出
淡入或淡出
fadeIn(int):淡入
fadeOut(int):淡出
-->
<input type="button" value="显示隐藏" id="btn1" />
<input type="button" value="划入划出" id="btn2" />
<input type="button" value="淡入淡出" id="btn3" />
<div id="div1"></div><br>
</body>
<script>
// 页面加载完成后进行事件
$(function(){
// 点击按钮 产生事件 显示隐藏 show（） hide（）
$("#btn1").click(function(){
//隐藏控件 参数为xxx毫秒内完成
//$("#div1").hide(2000);
// 显示使用show就行
// 可以使用toggle（）方法 点击显示 再次点击就隐藏
$("#div1").toggle(2000);
});
// 划入划出事件 slideUp（） slideDown（）
$("#btn2").click(function(){
// 当控件处于显示状态时 你只能使用划出状态（同理不显示时可以调用划入的方法）
//$("#div1").slideUp(2000);
// 同上特也有SlideToggle（）方法
$("#div1").slideToggle(2000);
});
// 点击按钮 div产生淡入淡出事件
$("#btn3").click(function(){
// 使用fadeOut fadeIn了 直接 fadeTaggle（）
$("#div1").fadeToggle(2000);
});
})
</script>
</html>
七 选择器
1基本选择器★
$("#id值") id选择器
$(".class值") 类选择器
$("标签名") 标签选择器
$("*") 获取全部元素
$("#id值,.class值") 获取多个选择器
注意：可以通过jquery对象.css("属性","值") 设置css样式。
了解:$("*")获取全部元素
所有的元素都获取例如：$("*").css() 给所有的元素设置css样式
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
选择符合上面两种选择器的元素
代码demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
background-color: #FF0000;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
</head>
<body>
<!--
作者：1246771571@qq.com
时间：2018-11-01
描述：
1基本选择器★
$("#id值") $(".class值") $("标签名")
id 类 标签选择器和css的使用类似
了解:$("*")获取全部元素
所有的元素都获取例如：$("*").css() 给所有的元素设置css样式
理解:获取多个选择器 用逗号隔开
$("#id值,.class值")
选择符合上面两种选择器（符合一个就行）的元素
2
-->
<input type="button" value="id选择器（类 元素不再给出）" id="btn1" />
<input type="button" value="全部选" id="btn2" />
<input type="button" value="多个" id="btn3" />
<div id="div1"></div><br><br />
<div id="div1",class="class1"></div><br>
</body>
<script>
$(function(){
// 此处介绍个id选择 class 元素选择器和css类似就不介绍了。
$("#btn1").click(function(){
$("#div1").css("background-color","aqua");
});
// 选择全部元素
$("#btn2").click(function(){
$("*").css("background-color","chartreuse");
});
// 选择 id为 div1 class 为class1 的
$("#btn3").click(function(){
$("#div1,.class1").css("background-color","crimson");
});
})
</script>
</html>
2 层次选择器
层次选择器 ★ 重点 类似css的后代选择器
- a空格b a的所有b后代（a标签下的所有元素）
- a>b a的所有b孩子 （a标签下的所有子元素，孙子元素就不行了不满足）
- a+b a的下一个兄弟(大弟弟)
（假如存在标签a嵌套b，c标签。b（id为id1），c（id为id2）是并列的，则id1下的id2 可写为$("#id1+#id2")）
<a>
<b id ="id1"></b>
<c id = "id2"></c>
<d></d>
</a>
则id1下的id2 标签（c） 可写为$("#id1+#id2")
- a~b a的所有弟弟
3 基本过滤选择器
基本过滤选择器:★
:frist 第一个 例如选择第一个为div的: $（"div:first"）
:last 最后一个 $（"div:last"）
:odd 索引奇数 $（"div:odd"）
:even 索引偶数
:eq(index) 指定索引 $（"div:eq(3)"）
:gt(index) > $（"div:gt(3)"）
:lt(index) < $（"div:lt(3)"）
4 内容过滤
:has("选择器"):包含指定选择器的元素
//例如： class元素为mini的div
$("div:has(".mini")")
5 可见过滤:
:hidden 在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
注意：br换行也是页面不展示的
:visible
例如选取所有可见的div:
$("div:visiable")
注意 jquery对象可以链式调用
6属性过滤器:★
1 [属性名]
含有此属性的元素
例如含有属性为title的div $("div[title]")
2 [属性名="值"] 不但含有此元素，还要有指定的值。
7 表单过滤:
:input 所有的表单子标签 input select textarea button
八 jq对属性和css操作总结
1 对属性的操作:
attr():设置或者获取元素的属性
方式1:获取
attr("属性名称")
方式2:设置一个属性
attr("属性名称","值");
方式3:设置多个属性 json
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称"):移除指定属性
//添加class属性的时候
// attr("class","值");
addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
removeClass("指定的样式值");
2 对css操作:操作元素的style属性
css():获取或者设置css样式
方式1:获取
css("属性名")
方式2:设置一个属性
css("属性名","值")
方式3:设置多个
css({
"属性1":"值1",
"属性2":"值2"
});
3 获取元素的尺寸:
width()
height()
九 补充
技术:
遍历数组
数组.each(function(){});
$.each(遍历数组,function(){});
注意:
each的function中可以加两个参数 index和dom
index是当前遍历的索引值
dom指代的是当前遍历的dom对象(开发中一般使用this即可)
//////////////////////////////
设置或者获取value属性
jquery对象.val():获取
jquery对象.val("...."):设置
/////////////////////////////////////////
设置获取获取标签体的内容
html()
text()
xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容
设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码
text:获取只是页面展示的内容
//////////////////////////////////////////////
创建一个元素: $("<标签></标签>")
///////////////////////
文档操作:
内部插入
a.append(c):将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面
appendTo
prependTo
外部插入
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
a.insertAfter(c)
a.insertBefore(c)
删除
empty() 清空元素
remove() 删除元素
表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选)
十 总结
后面的几个Demo可能不太详细，由于我也偷懒，有些看懂了就没写，这样对于快速的知识灌输情况下，记忆周期比较短。好在以后还会再学一遍，现在我是在预习的条件下写的，如有不足，后期学习时会慢慢完善笔记。
网友评论