jQuery入门

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

前端开发、java web、数据库专栏收录该内容

71 篇文章

订阅专栏

1、什么是jQuery?
jQuery：一个JavaScript的库,JavaScript的函数集
2、jQuery版本:
jQuery.com：点击下载
jQuery1.x;不在更新，存在兼容IE6,7,8
jQuery2.x;和1一样，只是不兼容IE6,7,8
jQuery3.x；优化了移动端
3、面试题：javaScript的window onload和jQuery中的ready函数有什么区别？
jQuery中的ready比window onload加载的早
4、jQuery选择器

<!DOCTYPE html>
<html>
<head>
	<title>第一个jQuery</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="./css/one.css">
	<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="./js/one.js"></script>
</head>
<body>
   <button id="show">点击一下</button>
</body>
</html>

// 没有jQuery之前
// window.onload=init;
// function init(){
// 	document.getElementById('show').onclick=function (){
// 		alert("点击一下");
// 	}
// }



 // $(document).ready(function(){
 // 	//以后所有jQuery的代码都必须写在ready事件中，下面是简化版
 //      alert("点击一下");
 // });
 

 //简化写法
 $(function(){
 	//让DOM加载完成后，执行我们的jQuery代码
      alert("也可以这样写")
 });

1. 基本选择器
兼容css选择器；
//id选择器
$(’#show’).css(“color”,“red”);
//类选择器
$(".show").css({
“width”:“250px”,“height”:“30px”
})
//标签选择器
$(“div”).css(“border”,“1px solid red”);
//逗号选择器
$（“#show,.show,input”）.css(“border”,“1px solid red”);
//子代选择器
$(“ul.show>li”).css(
{“border”,“1px solid red”
})

<ul class="show">
<li></li>
</ul>

//后代选择器
$(“ul.show>li”).css(
{“border”,“1px solid red”
})

<ul class="show">
<li>
<ul>
<li></li>
</ul>
</li>
</ul>

+表示下一个
~以后的兄弟标签都选中
2. 过滤选择器
拿到第一个li
$(function(){
$(“ul.show>ul>li:first”).css();
$(".show>li").first().css
})
//通过下标，确定要选中的标签
$(".show>li"）.eq(2).css（）；
//选中的偶数行
$(".show>li:even").css();
//选中的奇数行
$(".show>li:odd").css();
//大于第二行
$(".show>li:gt(2)").css();
//小于第二行
$(".show<li:lt(2)").css();
:root
:focus聚焦
//二次过滤
$(“ul.show>li”).filter(".acter").css();
$(“ul.show>li”).find(".acter").css();
一个是所有元素中选，一个是子元素中选
//选中标签的父标签
$(".box").parent().css()
//选中标签的祖宗标签
$(".box").parents(“li”).css();
//表示选中的子代标签
$(".box").children().css();
//表示选中下一个
$(".box").next().css();
//表示选中标签的后面的所有兄弟节点
$(".box").nextAll().css();
//表示选中上一个
$(".box").prev().css();
//表示选中标签的前面所有的兄弟节点
$(".box").prevAll().css();
//选中所有兄弟标签
$(".box").siblings().css();
//匹配文本
$(“li:contains(‘lll’)”).css();

<li>lll</li>

//判断是否存在某个样式
hasClass(" “);
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲info").hover(fu\dots$ (“info”).hasClass(“info”)){
//移除某个类样式
$(“info”).removeClass(“info”);
}else{
//添加类样式
$（“info”）.addClass(“info”)
}
},function(){
})
鼠标放上去和下来
简单方法
//切换类样式
$(”#info").toggleClass(“info”);