什么是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函数和面向对象编程

视频讲解