认识JQuery
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
- jQuery 很容易学习。
- 快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。 - 提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。 - 创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。 - 提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。 - 增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。 - 更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
只需要少量的代码，即可将它们集成到网站上，并且能够帮助访问者分享网站上的内容。
JS与JQ之间的获取
//原生js获取元素
var div = document.getElementsByClassName("header");
console.log(div);
//jq通过类选择器获取元素并输出控制台
console.log($(".header"));
//等待页面DOM结构加载完成后执行，事件处理的程序
//详写
$(document).ready(function(){
console.log($(".header"));
})
//简写
$(function(){
console.log($(".header"));
})盒子动画示例
这个例子在页面上定义了2个层，单击层会让层消失，选择元素使用了JQuery选择器。例子中消失的动画效果是JQuery提供的默认动画效果。hide隐藏
在操作之前先获取jq3.6.1版本的代码 可通过外链或者本地方式引入 外链引入必须要有网络的情况下才能正常使用jquery-3.6.1.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.header{
width: 300px;
height: 100px;
text-align: center;
background-color: #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
</head>
<body>
<!-- HTML的代码 -->
<div class="header">
<h1>Hello World</h1>
</div>
<div class="header">
<h1>Hello XingYiGe</h1>
</div>
<br />
<br />
<br />
<button class="butGo">点我点我点我</button>
</body>
<script src="js/index.js"></script>
</html>//JS代码
//等待页面DOM结构加载完成后执行，事件处理的程序
$(function(){
$(".header").click(function(){
//hide(隐藏时间) 用于隐藏
$(this).hide(3000);
})
})
给按钮也加上单击事件 多种写法
//写法一
$(document).ready(function(){
$(".butGo").click(function(){
alert("你点我干嘛 有种再点一次");
$(".butGo").hide(3000);
})
})
//写法二
$().ready(function(){
$(".butGo").click(function(){
alert("你点我干嘛 有种再点一次");
$(".butGo").hide(3000);
})
})
//写法三
$(function(){
$(".butGo").click(function(){
alert("你点我干嘛 有种再点一次");
$(".butGo").hide(3000);
})
})
解决JQuery与其他库冲突
var $="其他库";
//解决冲突并重新创建一个快捷方式
var jq = jQuery.noConflict();
console.log(jq("div"));选择器
//基本选择器
$("#id") //ID选择器
$("div") //元素选择器
$(".classname") //类选择器
$(".classname,.classname1,#id1") //组合选择器
//层次选择器
$("#id>.classname ") //子元素选择器
$("#id .classname ") //后代元素选择器
$("#id + .classname ") //紧邻下一个元素选择器
$("#id ~ .classname ") //兄弟元素选择器
//过滤选择器(重点)
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") //下标大于 2 的li
$("li:lt(2)") //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
//内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
//可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
//属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
$("div[id$='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
$("input[id][name$='man']") //多属性选过滤，同时满足两个属性的条件的元素
//状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
//表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
评论 (2)