jQuery入门基础

迈不过友情╰ 2022-01-21 06:11 274阅读 0赞

### jQuery是什么？ ###

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

### jQuery的特点 ###

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

### jQuery下载 ###

官网下载地址 [https://jquery.com/download/][https_jquery.com_download] ，选择对应的版本下载即可

### jQuery的基本语法 ###

表单选择器：

*  ：input 找出所有的输入项，不单单找出input textarea select
 *  ：text 找出 type 类型为 text
 *  ：password

基本过滤器

*  ：even
 *  ：odd
 *  ：gt
 *  ：lt
 *  ：eq
 *  ：first
 *  ：last

表单对象属性

*  ：selected
 *  ：checked

> $( function )：文档加载完成事件  
> css（）：修改css样式  
> prop（）：修改属性 / 获取属性  
> html（）：修改innerHTML  
> .  
> append：给自己添加节点  
> appendTo：添加到别的地方  
> prepend：在最前面添加子节点  
> after：在后面添加一个节点  
> empty：清空多有子节点

##### jQuery的写法 #####

一般的写法

最简单的写法

JS与jQuery修改div中的文本内容

<!DOCTYPE html>
    <html>
    <head>
    	<title>jquery</title>
    	<script src="js/jquery-3.4.1.js"></script>
    </head>
    <body>
    
    	
    	<input type="button" value="普通JS修改div内容" onclick="changeJS()">
    	<input type="button" value="jQuery修改div内容" id="btn2">
    	<div id="div1">
    		这里的内容一会儿要被JS代码修改
    	</div>
    
    	<script type="text/javascript"> /*普通的JS方式修改div中的文本内容*/ function changeJS() { var div = document.getElementById('div1'); div.innerHTML = "JS成功被修改了" } /*jQuery方式修改div中的文本内容*/ $(function() { //给按钮绑定事件 $("#btn2").click(function() { //找到div $("#div1").html("jQuery成功修改了div的内容"); }); }); </script>
    </body>
    </html>

![在这里插入图片描述][20190608163202403.png]  
JS与jQuery对象转换

<input type="button" value="jQuery修改div内容" id="btn2">
    	<div id="div1">
    		这里的内容一会儿要被JS代码修改
    	</div>
    <script type="text/javascript"> $(function () { //给按钮绑定事件 $("#btn2").click(function () { //找到div1 $("#div1").html("jQuery方式成功修改了内容"); //将jQuery对象转为JS对象来调用 var $div = $("#div1"); var jsDiv = $div.get(0); var jsDiv = $div[0]; jsDiv.innerHTML = "jQuery成功转成JS！"; }); }); </script>

![在这里插入图片描述][20190608164924555.png]

[https_jquery.com_download]: https://jquery.com/download/
[20190608163202403.png]: /images/20220121/9e29fc2e537446cfaa7e9fae6e78c451.png
[20190608164924555.png]: /images/20220121/1c1919fb04bf42fdbfe7427bb4bad40d.png