JQuery

发表于 | 更新于 | 分类于

1. JQ简介

1.1 什么是JQ

​ JQ是JS写的插件库，说白了，就是一个js文件

1.2 JS和JQ是区别

​ 凡是用jq能实现的，js都能实现，js能实现的，jq却不一定能实现

1.3 JQ的理念

​ 减少代码量，提高工作效率

1.4 JQ的引入

1.4.1 本地文件引入

1
<script src="js/jquery-3.2.1.js"></script>

1.4.2 CDN引入

1
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

相应网站：https://www.bootcdn.cn/jquery/

2. JQ的基本使用

在JavaScript中，用$声明使用的是jQuery,例如：

1
2
3
4
5
6
7
<button class="btn">点我</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $('button').click(function(){
        alert(123);//点击button时弹出123
    })
</script>

2.1 JQ的选择器

在jQ中使用选择器选择元素和在CSS中使用CSS选择器是一样的 ，上面那个例子：

1
2
3
4
5
6
7
8
9
<script>
    $('button').click(function(){//使用的是标签选择器
        alert(123);
    })
    
    $('#btn').click(function(){//使用的是类选择器
        alert(123);
    })
</script>

当然在使用过程中也可以用后代选择器，兄弟选择器之类的选择器

2.2 基本使用1

我们首先看下面代码，方便后面讲解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="div1">
    <p id="p1" class="p11">我是段落标签一</p>
    <p id="p2" class="p11">我是段落标签二</p>
    <p id="p3" class="p11">我是段落标签三</p>
    <span>我是文本标签一</span>
    <span>我是文本标签二</span>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    var p1 = document.getElementById("p1");
    $("#p1");
</script>

2.2.1 JS与JQ之间的转换

(1) jq转js：get()与[]

1
2
$("p").get(2).innerText = '1111111';
$("p")[1].innerText = '222222';

get()与[]中填写索引值，然后对其进行操作。

(2) js转jq

用$()将js定义的变量括起来，如：

1
$(p1) //js转jq
html()
1
$(p1).html(123123); //html等同于js的innerHtml
text()
1
$(p1).text(123123); //text等同于js的innerText

2.2.2 鼠标事件

(1) 单击：click()

1
2
3
$("#p1").click(function () {
        alert(123)
    });

(2) 鼠标移入移出

1
2
3
4
5
$("#p1").hover(function () {
       $("#p2").html("鼠标移入效果") //鼠标移入
   },function () {
       $("#p2").html("鼠标移出效果") //鼠标移出
   });

2.2.3 追加与添加

1
2
$("#p1").append("<p>我是p1的兄弟</p>"); //将双引号内的内容追加到#p1后面
$("#p1").prepend("<p>我也是p1的兄弟</p>"); //将双引号内的内容添加到#p1前面

2.2.4 遍历：each

1
2
3
4
$("ul li").each(function (i) {
        $(this).html("我是第"+i+"个") //this是指遍历的当前的对象自己
		alert($(this).index()); //弹出遍历的当前的对象的索引值
    });

2.2.5 操作属性

1
2
$("#div1").attr("class","b");  //添加类属性，类名为b
$("#div1").removeAttr("class") //删除属性class

2.2.6 操作class类名

1
2
$("#div1").addClass("div321"); //添加类名
$("#div1").removeClass(); //删除类名

2.2.7 判断属性

1
alert($("#div1").hasClass("div222")); //判断div1中是否存在类名为div222

2.2.8 滚动条事件

1
2
3
4
$(window).scroll(function () {
	console.log($(document).scrollTop()); //打印滚动条与顶部的距离
	console.log($(document).scrollLeft()) //打印滚动条与左边的距离
})

2.2.9 查找元素

1
2
3
4
5
console.log($("#div1").parent()); //查找父级元素body
console.log($("#div1").children()); //查找子级元素
console.log($("#p1").siblings()); //查找兄弟元素
console.log($("#div1").find("span")); //查找后代元素
console.log($("#sp1").parents("p")); //查找祖辈元素
请我喝杯茶呗~