JQuery - 技术栈

JQuery语法

Query语法是通过选取HTML元素,并对选取的元素执⾏某些操作

基础语法

复制代码

$(selector).action()

• $() 是⼀个函数,它是jQuery提供的⼀个全局函数,⽤于选择和操作HTML元素.

• Selector选择器,⽤来"查询"和"查找"HTML元素

• action操作,执⾏对元素的操作

JQuery的代码通常都写在 documentready函数中.

document：整个⽂档对象,⼀个⻚⾯就是⼀个⽂档对象,使⽤document表⽰.

这是为了防⽌⽂档在完全加载（就绪）之前运⾏jQuery代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

复制代码

$(document).ready(function(){
 // jQuery functions go here
});

⽰例:

复制代码

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
 $(document).ready(function(){
 $('button').click(function(){
 $(this).hide();
 });
 });
 
</script>

给按钮添加了click事件,点击后元素消失. 简洁写法:

复制代码

$(function(){
 
 // jQuery functions go here
 
});

JQuery 选择器

我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作.

JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器.

jQuery中所有选择器都以 $开头：$ ().

|------------------|---------------------------------|
| 语法 | 描述 |
| $("\*") | 选取所有元素 | |$ (this) | 选取当前HTML元素 |
| $("p") | 所有\元素 | |$ ("p:first") | 选取第⼀个<p>元素 |
| $("p:last") | 最后⼀个\元素 | |$ (".box") | 所有class="box"的元素 |
| $("#box") | id="box"的元素 | |$ (".intro.demo") | 所有class="intro"且class="demo"的元素 |
| $("p.intro") | 选取class为intro的\元素 | |$ ("ulli:first") | 选取第⼀个<ul>元素的第一个<li>元素 |
| $(":input") | 所有\元素 | |$ (":text") | 所有type="text"的元素 |
| $(":checkbox") | 所有type="checkbox"的元素 |

JQuery事件

JS要构建动态⻚⾯,就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击,选择,修改等)都会在浏览器中产⽣⼀个个事件,被JS获取到,从⽽进⾏更复杂的交互操作.

浏览器就是⼀个哨兵,在侦查敌情(⽤⼾⾏为).⼀旦⽤⼾有反应(触发具体动作),哨兵就会点燃烽⽕台的狼烟(事件),后⽅就可以根据狼烟来决定下⼀步的对敌策略.

事件由三部分组成:

事件源:哪个元素触发的
事件类型:是点击,选中,还是修改?
事件处理程序:进⼀步如何处理.往往是⼀个回调函数.

某个元素的点击事件:

复制代码

$("p").click(function(){
 //动作发⽣后执⾏的代码 
});

某个元素的点击事件:

|--------------|---------------------------------|
| 事件 | 代码 |
| 文档就绪事件（完成加载） | $(document).ready(function) | | 点击事件 |$ (selector).click(function) |
| 双击事件 | $(selector).dblclick(function) | | 元素的值发生改变 |$ (selector).change(function) |
| 鼠标悬停事件 | $(selector).mouseover(function) |

操作元素

获取/设置元素内容

三个简单的获取元素内容的JQuery⽅法

|----------|------------------------|
| JQuery方法 | 说明 |
| text() | 设置或返回所选的元素的文本内容 |
| html() | 设置或返回所选元素的内容（包括HTML标签） |
| val() | 设置或返回表单字段的值 |

这三个⽅法即可以获取元素的内容,⼜可以设置元素的内容.

有参数时,就进⾏元素的值设置,没有参数时,就进⾏元素内容的获取.

获取元素内容:

复制代码

<div id="test"><span>你好</span></div>
<input type="text" value="hello">
<script>
 $(document).ready(function () {
 var html = $("#test").html();
 console.log("html内容为:"+html);
 var text = $("#test").text();
 console.log("⽂本内容为:"+text);
 var inputVal = $("input").val();
 console.log(inputVal);
 });
</script>

设置元素内容

复制代码

<div id="test"></div>
<div id="test2"></div>
<input type="text" value="">
<script>
 $(document).ready(function () {
 $("#test").html('<h1>设置html</h1>');
 $("#test2").text('<h1>设置text</h1>');
 $("input").val("设置内容");
 });
</script>

获取/设置元素属性

JQueryattr()⽅法⽤于获取属性值.

获取元素属性

复制代码

<p><a href="https://www.bitejiuyeke.com/index" id="bite">⽐特就业课</a></p>
<script>
 $(function(){
 var href = $("p a").attr("href")
 console.log(href);
 });
</script>

设置元素属性

复制代码

<p><a href="https://www.bitejiuyeke.com/index" id="bite">⽐特就业课</a></p>
<script>
 $(function(){
 $("p a").attr("href","baidu.com")
 console.log($("p a").attr("href"));
 });
</script>

获取/返回css属性

css()⽅法设置或返回被选元素的⼀个或多个样式属性

获取元素属性

复制代码

<div style="font-size: 36px;">我是⼀个⽂本</div>
<script>
 $(function(){
 var fontSize = $("div").css("font-size");
 console.log(fontSize);
 });
</script>

设置元素属性

复制代码

<div style="font-size: 36px;">我是⼀个⽂本</div>
<script>
 $(function(){
 $("div").css("font-size","24px");
 
 });
</script>

添加元素

添加HTML内容

append():在被选元素的结尾插⼊内容
prepend():在被选元素的开头插⼊内容
after():在被选元素之后插⼊内容
before():在被选元素之前插⼊内容

代码⽰例:

复制代码

<ol>
 <li>List item 1</li>
 <li>List item 2</li>
1
2
3 <li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
<script>
 $(function () {
 $("ol").append("<li>append</li>");
 $("ol").prepend("<li>prepend</li>");
 
 $("img").before("图⽚前插⼊");
 $("img").after("图⽚后插⼊");
 });
</script>

删除元素

删除元素和内容，⼀般使⽤以下两个jQuery⽅法：

remove():删除被选元素（及其⼦元素）
empty():删除被选元素的⼦元素。

我是⼀个div

删除被选元素的⼦元素

复制代码

<ol>
 <li>List item 1</li>
 <li>List item 2</li>
 <li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>
 $(function () {
 $('button').click(function(){

$('ol').empty();
 });
 });
</script>