JQuery相关知识
一、JQuery概述：
1.JQuery概念：
jQuery 是一个 JavaScript 函数库。
2.jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
3.JQuery的作用：
（1）写更少的代码做更多的事。
（2）将我们页面的JS代码和HTML页面代码进行分离。
二、JQuery开发步骤：
将我们的页面的JS代码和HTML页面代码进行分离。
1.导入JQ相关的文件
<script type="text/javascript" src="../js/jquery-3.5.1.js"> </script>
2.文档加载完成事件：$（function）：页面初始化操作：绑定事件，启动页面定时器。
//最简单的写法
$(function(){
alert("$(function()")
});
3.确定相关操作的事件。
4.事件触发函数。
5.函数里面再去操作相关的元素。
JQuery入门案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--导包引入JQ文件-->
<script type="text/javascript" src="../js/jquery-3.5.1.js"> </script>
<script type="text/javascript">
//JS文档加载事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");//会覆盖前面的
}
/*文档加载完成事件*/
jQuery(document).ready(function(){
//在这里写你的代码。。。
alert("jQuery(document).ready(function()")
});
/*JQuery简写成$*/
$(document).ready(function(){
//在这里写你的代码。。。
alert("$(document).ready(function()")
});
//最简单的写法
$(function(){
alert("$(function()")
});
</script>
</head>
<body>
</body>
</html>
动画效果：
show：显示
hide：隐藏
slideDown：向下滑动
slideUp：向上滑动
fadeln
fadeOut
三、JQuery中的选择器
选择器：让我们能够更精确的找到我们要操作的元素。
1.基本选择器：
（1）ID选择器：#ID名字
（2）类选择器：.类名
（3）元素选择器：标签名字
（4）通配选择器：*
（5）选择器分组：选择器1，选择器2
2.层级选择器:
后代选择器：选择器1：（找出所有的后代，儿子孙子曾孙）
子元素选择器：选择器1>找出所有儿子
相邻兄弟选择器：选择器1+选择器2 找出紧挨着它的弟弟
所有弟弟选择器：选择器1~选择器2 ~找出所有弟弟
3.基本过滤器：
：first（找出第一个）
：even 找出索引为偶数
：odd 找出索引为奇数
：gt（index）找出大于索引的元素
：it（index）找出小于索引的元素
：eq（index）等于
4.属性选择器：
选择器[href]：单个属性
选择器[href][ title]：多个属性
选择器[href][title = ‘test’]：多个属性，包含值
5.表单过滤器：
：input 找出所有输入项：不单单找出input textarea select
：text ：找出type类型为text
：password
6.表单对象属性：
找出select中被选中的那一项：
potion：selected
JQuery重要函数汇总:
$(function)：文档加载完成的事件
css()：修改CSS样式
prop()：修改属性/获取属性值
html()：修改innerHTML
append：给自己添加子节点
appendTo：将自己添加到别人家，给自己找爹
prepend：在自己最前面添加子节点
after：在自己后面添加一个兄弟
empty：清空所有子节点
JQuery中的遍历：
//方法1
$(cities).each(function(i,n){
});
//方法2
$.each(arr,function(i,n){
});
扫一扫
4013
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
