什么是jQuery?
jQuery和JavaScript的作用一样,都是负责网页行为操作,增加网页和用户的交互效果的,而且jQuery简化了JavaScript编程,jQuery实现交互效果更简单。
jQuery也兼容了现在主流的浏览器,增加了程序员的开发效率。
可以通过jQuery官网获取库文件:
引入jquery.js文件:
<script src="/static/js/jquery-3.6.3.min.js"></script>
jQuery入口函数:(速度比window.onload更快)
<script>
$(document).ready(function(){
alert("hello jQuery");
});
</script>
简写:
$(function(){
alert("Hello jQuery");
});
元素的隐藏、展现
- $box.hide():隐藏,可以添加参数,表示消失时间
- $box.show():展现,可以添加参数,表示出现时间
- $box.fadeOut():慢慢消失,可以添加参数,表示消失时间
- $box.fadeIn():慢慢出现,可以添加参数,表示出现时间
常用选择器
- $('#myId'):选择id为myId的标签
- $('.myClass'):选择class为myClass的标签
- $('div'):选择所有的div标签
- $("a[target='_blank']"):选取所有target属性值等于"_blank"的<a>元素
项目目标:点击叉号,关闭弹窗。
$(function(){
let $container = $("#container");
// console.log($container);
let $btn = $("#btn");
$btn.click(function(){
$container.css({'display': 'none'});
});
});
筛选选择器
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
$(function(){
$("li:first").css({"color": "red"});
$("li:eq(1)").css({"color": "blue"});
$("li:odd").css({"color": "pink"});
$("li:even").css({"color": "green"});
});
</script>
选择集转移
- $('#box').prev(); 表示选择id是box元素的上一个的同级元素
- $('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
- $('#box').next(); 表示选择id是box元素的下一个的同级元素
- $('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
- $('#box').parent(); 表示选择id是box元素的父元素
- $('#box').children(); 表示选择id是box元素的所有子元素
- $('#box').siblings(); 表示选择id是box元素的其它同级元素
- $('#box').find('.myClass'); 表示选择id是box后代元素的class等于myClass的元素
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<ul id="list">
<li class="box1">4-1</li>
<li class="box1">4-2</li>
<ul>
<li class="box1">4-3-1</li>
<li class="box2">4-3-2</li>
<li class="box2">4-3-3</li>
</ul>
</ul>
<li>5</li>
<li>6</li>
</ul>
<script>
$(function(){
// $("#list").prev().css({'color':'red'});
// $("#list").prevAll().css({'color':'red'});
// $("#list").next().css({'color':'red'});
// $("#list").nextAll().css({'color':'red'});
// $("#list").children(".box1").css({'color':'red'});
// $("#list").siblings().css({'color':'red'});
$("#list").find(".box1").css({'color':'red'});
});
</script>
对内容、文本操作
- $box.html():获取、修改HTML内容
- $box.text():获取、修改文本信息
- $box.val():获取、修改文本的值
<div id="box">hello</div>
<input type="text" name="" id="" value="100">
<a href="" id="mylink">黑猫编程</a>
<script>
let $box = $("#box");
console.log($box.html());
console.log($box.text());
$box.html("<span style='color:red'>你好</span>");
$box.append("<span style='color:green'>你好</span>");
let $input =$("input");
$input.val("200");
let $a = $("a");
$a.prop({"href":"https://noi.hioier.com/", "target":"_blank"});
</script>
事件传递
<div id="box1">
<div id="box2">
</div>
</div>
<button>停止</button>
<script>
$("#box1").on("click", function(e){
console.log("click box1");
});
$("#box2").on("click", function(e){
console.log("click box2");
return false; // 阻止事件冒泡
});
$("button").on("click", function(e){
$("#box1").off("click");
$("#box2").off("click");
});
</script>
对类的操作
- $box.addClass(class_name):添加某个类
- $box.removeClass(class_name):删除某个类
- $box.hasClass(class_name):判断某个类是否存在
<div></div>
<script>
$(function(){
let $div = $("div");
console.log($div);
$div.on("click", function(e){
$(this).addClass("active");
console.log($(this).hasClass("active"));
});
});
</script>
相关推荐
- Javascript对象和选项卡实现
- 一文详解javascript轮播图
- Javascript简介和基础数据类型
- 一文详解Javascript定时器
- 一文详解Javascript DOM树结构
- 一文详解Javascript鼠标事件,拖拽原理
- Javascript点击按钮控制图片切换
- 一文详解javascript函数和面向对象编程
视频讲解
视频加载中...