初识jQuery

jQuery是一个优秀的核心类库

用途：

1. 访问和操作DOM元素

2. 控制页面样式

3. 对页面事件的处理

4. 方便的使用JQuery插件

配置

jQuery官网，找到Download jQuery按钮，下载开发版，选择复制，在 vscode新建.js结尾的文件，html使用时导入

在页面引用jQuery

<script src="jQuery.js"></script>

<script> $(document).ready(function(){ //执行代码 }); </script>

$(document).ready()与window.onload()的区别：

1. window.onload()同一页面不能同时编写多个，编写多个只能输出一次，没有简化写法

2. $(document).ready()同一页面可以编写多个，编写多个输出结果为多个，简化写法

   <script> $(function()){ //执行代码 } </script>

语法结构

工厂函数$()

$(" ")就是将DOM对象转化为jQuery对象

选择器$(selector)

标签：$("p") id选择器：$("#id") 类选择器 ：$(".class")

方法action()

对应的事件：click，mouseover。。。。。

//改变内容,html()识别标签
jQuery对象.html("  ");/jQuery对象.text("  ");//纯文本
//获取内容
jQuery对象.html();/jQuery对象.text();
​
//向被选元素添加一个或多个类样式
jQuery对象.addClass([样式样式名]);
//移除一个类
jQuery对象.remove([样式样式名]);
//样式的设置与获取
//使用css()给p标签设置样式
$("p").css("属性名","属性值");
$("p").css({"属性名":"属性值","属性名":"属性值"});
//获取样式
$("p").css("属性名");
​
//显示元素
$(selector).show();
$(selector).css("display","block");
//隐藏元素
$(selector).hide();
$(selector).css("display","none");
​
//链式编程
$("div").css("","").html("111");//既改变样式又改变内容
$("div").next();//同级别的下一个元素
​
​

DOM对象和jQuery对象

DOM中的节点通常分三种：元素节点，属性节点，文本节点

jQuery对象不能直接使用DOM对象的方法，反之，也不可

DOM转jQuery

直接使用工厂函数$()包裹起来

$(DOM对象)；

jQuery转DOM

1. $("div")[索引]

2. $("div").get(索引)