①jQuery 介绍及基础知识（用jQuery修改样式）

灰太狼 2023-07-24 08:13 3阅读 0赞

### jQuery ###

*  jQuery介绍
 *   *  初识jQuery ※
     *  jQuery的两把利器
     *  jQuery的核心函数 ※
 *  jQuery对象 ※
 *  选择器 （用css()简单修改样式）
 *   *  基本选择器
     *  层次选择器
     *  过滤选择器
     *  表单选择器
 *  $工具方法 type() isArray() isFunction()
 *  属性相关方法 attr() removeAttr() prop()
 *  与css样式有关的方法 ※
 *   *  css()
     *  offset()和postion()
     *  元素滚动 scrollTop()
     *  元素的尺寸 height() width() innerHeight() innerWidth() outerHeight() outerWidth()
 *  本文涉及的方法
 *   *  html()
     *  val()
     *  addClass()
     *  appendTo()
     *  each()
     *  trim()
     *  click()
     *  size() / length
     *  get(index)
     *  index()
     *  css()
     *  attr()
     *  removeAttr()
     *  prop()
     *  eq()

--------------------

***本人是个新手，写下博客用于自我复习、自我总结。  
如有错误之处，请各位大佬指出。  
学习资料来源于：尚硅谷***

--------------------

# jQuery介绍 #

*  像之前使用JavaScript时，要想实现页面的动态交互，肯定会用到DOM和BOM。我们也知道DOM和BOM用起来，感觉还是麻烦一些，我在之前也写到了一些简便用法。所以肯定会有大佬将简便的用法包装起来，让DOM和BOM更易用（当然也还有其他的内容），所以jQuery也就应运而生。
 *  jQuery是一个快速、简洁的**JavaScript框架**。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种**简便的JavaScript设计模式**，优化HTML文档操作、事件处理、动画设计和Ajax交互。
 *  虽然Vue和React可能更好，但是jQuery是最基本的东西。

--------------------

## 初识jQuery ※ ##

*  jQuery的不同版本：  
    ①1.x：兼容老版本IE，文件更大  
    ②2.x：部分IE8及以下不支持，文件小，执行效率更高  
    ③3.x：完全不再支持IE8及以下版本，提供了一些新的API，提供不包含ajax/动画API的版本。  
    （之后使用的jQuery库，大家需要自行下载。因为不同版本对普通学习者来说区别不大，之后使用1.x版本）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]  
    其中，带min的是压缩过的，不带min是没压缩过的。在测试阶段使用未压缩的，因为这样可以避免一些问题。在真正上线使用的时候，使用压缩过的，这样用户运行的比较快，而且很小。
 *  在这里说一个有关分号的问题：在此之前，分号是必须要有的，当然在一些用法里，分号是一定要加的。但除此以外，以后再写JS代码时，可以省略有些确实有点多余的分号。 [https://www.jianshu.com/p/94db9d69fd1f][https_www.jianshu.com_p_94db9d69fd1f]  
    （有点python的感觉）
 *  本地引入jQuery库：  
    `<script type="text/javascript" src="js/jquery-1.12.3.js"></script>`
 *  CDN远程引入jQuery库：  
    `<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>`  
    （项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="UTF-8">
    	<title>01_初识jQuery</title>
    
    	
    	<script type="text/javascript"> window.onload = function() { var btn1 = document.getElementById('btn1'); btn1.onclick = function() { var username = document.getElementById('username').value; alert(username); }; }; </script>
    
    	
    	
    	<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    	
    	
    	<script type="text/javascript"> /* 1. 使用jQuery核心函数: $ 或 jQuery 2. 使用jQuery核心对象: 执行$()返回的对象 */ //绑定文档加载完成的监听 jQuery(function() { var $btn2 = $('#btn2') $btn2.click(function() { // 给btn2绑定点击监听 var username = $('#username').val() alert(username) }) }) </script>
    	</head>
    	
    	<body>
    		
    		用户名:
    		<input type="text" id="username">
    		<button id="btn1">确定(原生版)</button>
    		<button id="btn2">确定(jQuery版)</button>
    	</body>
    </html>

（也许看到这还不了解为什么这么用，就可以把它当作jQuery的固定用法，其实有一部分涉及到JS的高级用法，但是目前我还没有学到。之后还会遇到很多方法，建议去自行下载jQuery1.7 中文手册，或其他版本的，方便参考。因为如果遇到一些用法比较简单的，在这里不会过多赘述。）

--------------------

## jQuery的两把利器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>jQuery的二把利器</title>
    </head>
    <body>
    	
    
    	<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    	<script type="text/javascript"> //1. jQuery函数: 直接可用 console.log($, typeof $) console.log(jQuery === $) // true //2. jQuery对象: 执行jQuery函数得到它 console.log($() instanceof Object) // true </script>
    </body>
    </html>

--------------------

## jQuery的核心函数 ※ ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>03_jQuery核心函数</title>
    </head>
    <body>
    
    	<div>
    		<button id="btn">测试</button>
    		<br /> 
    		<input type="text" name="msg1" />
    		<br /> 
    		<input type="text" name="msg2" />
    		<br />
    	</div>
    
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框 需求2. 遍历输出数组中所有元素值 需求3. 去掉" hello "两端的空格 */ /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/ //用法1.1 参数为函数 : 当DOM加载完成后，执行此回调函数 $(function() { // 绑定文档加载完成的监听 //用法1.2 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 $('#btn').click(function() { // 绑定点击事件监听 // this是什么? 发生事件的dom元素(<button>) // alert(this.innerHTML) // 用法1.3 参数为DOM对象: 将dom对象封装成jQuery对象 alert($(this).html()) // 用法1.4 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象 $('<input type="text" name="msg3"/><br/>').appendTo('div') }) }) //需求2. 遍历输出数组中所有元素值 var arr = [ 2, 4, 7 ] // 用法2.1 $.each() : 隐式遍历数组 $.each(arr, function(index, item) { console.log(index, item) }) //需求3. 去掉" my atguigu "两端的空格 // 用法2.2 $.trim() : 去除两端的空格 var str = ' hello ' // console.log('---'+str.trim()+'---') console.log('---' + $.trim(str) + '---') </script>
    </body>
    </html>

--------------------

# jQuery对象 ※ #

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>04_jQuery对象</title>
    </head>
    
    <body>
    	<button>测试一</button>
    	<button>测试二</button>
    	<button id="btn3">测试三</button>
    	<button>测试四</button>
    
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求1. 统计一共有多少个按钮 需求2. 取出第2个button的文本 需求3. 输出所有button标签的文本 需求4. 输出'测试三'按钮是所有按钮中的第几个 */ //需求1. 统计一共有多少个按钮 var $buttons = $('button') /*size()/length: 包含的DOM元素个数*/ console.log($buttons.size(), $buttons.length) //需求2. 取出第2个button的文本 /*[index]/get(index): 得到对应位置的DOM元素*/ console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML) //需求3. 输出所有button标签的文本 /*each(): 遍历包含的所有DOM元素*/ /*$buttons.each(function (index, domEle) { console.log(index, domEle.innerHTML, this) })*/ $buttons.each(function() { console.log(this.innerHTML) }) //需求4. 输出'测试三'按钮是所有按钮中的第几个 /*index(): 得到在所在兄弟元素中的下标*/ console.log($('#btn3').index()) //2 /* * 伪数组 * Object对象 * length属性 * 数值下标属性 * 没有数组特别的方法: forEach(), push(), pop(), splice() */ console.log($buttons instanceof Array) // false </script>
    </body>
    </html>

--------------------

# 选择器 （用css()简单修改样式） #

--------------------

## 基本选择器 ##

基本选择器和JavaScript一样。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>05_基本选择器</title>
    <style> ul{ list-style:none; } </style>
    </head>
    <body>
    
    	<div id="div1" class="box">div1(class="box")</div>
    	<div id="div2" class="box">div2(class="box")</div>
    	<div id="div3">div3</div>
    	<span class="box">span(class="box")</span>
    	<br>
    	<ul>
    		<li>AAAAA</li>
    		<li title="hello">BBBBB(title="hello")</li>
    		<li class="box">CCCCC(class="box")</li>
    		<li title="hello">DDDDDD(title="hello")</li>
    	</ul>
    
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求: 1. 选择id为div1的元素 2. 选择所有的div元素 3. 选择所有class属性为box的元素 4. 选择所有的div和span元素 5. 选择所有class属性为box的div元素 */ //2. 选所有的div元素 $('div').css('background', 'skyblue') //1. 选择id为div1的元素 $('#div1').css('background', 'red') //3. 选择所有class属性为box的元素 $('.box').css('background', 'orange') //4. 选择所有的div和span元素 //$('div,span').css('background', 'black') //5. 选择所有class属性为box的li元素 $('li.box').css('background', '#666') //$('*').css('background', 'red') </script>
    </body>
    </html>

--------------------

## 层次选择器 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>06_层次选择器</title>
    <style> ul{ list-style:none; } </style>
    </head>
    <body>
    	<ul>
    		<li>AAAAA</li>
    		<li class="box">CCCCC</li>
    		<li title="hello"><span>BBBBB</span></li>
    		<li title="hello"><span class="box">DDDD</span></li>
    		<span>EEEEE</span>
    	</ul>
    
    	
    
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求: 1. 选中ul下所有的的span 2. 选中ul下所有的子元素span 3. 选中class为box的下一个li 4. 选中ul下的class为box的元素后面的所有兄弟元素 */ //1. 选中ul下所有的的span // $('ul span').css('background', 'yellow') //2. 选中ul下所有的子元素span // $('ul>span').css('background', 'yellow') //3. 选中class为box的下一个li // $('.box+li').css('background', 'yellow') //4. 选中ul下的class为box的元素后面的所有兄弟元素 $('ul .box~*').css('background', 'yellow') </script>
    </body>
    </html>

--------------------

## 过滤选择器 ##

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>07_过滤选择器</title>
    </head>
    <body>
    
    	<div id="div1" class="box">class为box的div1</div>
    	<div id="div2" class="box">class为box的div2</div>
    	<div id="div3">div3</div>
    	<span class="box">class为box的span</span>
    	<br />
    	<ul>
    		<li>AAAAA</li>
    		<li title="hello">BBBBB</li>
    		<li class="box">CCCCC</li>
    		<li title="hello">DDDDDD</li>
    		<li title="two">BBBBB</li>
    		<li style="display: none">我本来是隐藏的</li>
    	</ul>
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求: 1. 选择第一个div 2. 选择最后一个class为box的元素 3. 选择所有class属性不为box的div 4. 选择第二个和第三个li元素 5. 选择内容为BBBBB的li 6. 选择隐藏的li 7. 选择有title属性的li元素 8. 选择所有属性title为hello的li元素 */ //1. 选择第一个div // $('div:first').css('background', 'red') //2. 选择最后一个class为box的元素 //$('.box:last').css('background', 'red') //3. 选择所有class属性不为box的div // $('div:not(.box)').css('background', 'red') //4. 选择第二个和第三个li元素 // $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次 // $('li:lt(3):gt(0)').css('background', 'red') //5. 选择内容为BBBBB的li // $('li:contains("BBBBB")').css('background', 'red') //6. 选择隐藏的li // console.log($('li:hidden').length, $('li:hidden')[0]) //7. 选择有title属性的li元素 // $('li[title]').css('background', 'red') //8. 选择所有属性title为hello的li元素 $('li[title="hello"]').css('background', 'red') </script>
    </body>
    </html>

--------------------

## 表单选择器 ##

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>08_表单选择器</title>
    </head>
    <body>
    	<form>
    		用户名: <input type="text" />
    		<br> 
    		密 码: <input type="password" />
    		<br>
    		爱 好: 
    		<input type="checkbox" checked="checked" />篮球 
    		<input type="checkbox" />足球 
    		<input type="checkbox" checked="checked" />羽毛球 
    		<br>
    		性 别: 
    		<input type="radio" name="sex" value='male' />男 
    		<input type="radio" name="sex" value='female' />女
    		<br> 
    		邮 箱: <input type="text" name="email" disabled="disabled" />
    		<br> 
    		所在地: 
    		<select>
    			<option value="1">北京</option>
    			<option value="2" selected="selected">天津</option>
    			<option value="3">河北</option>
    		</select>
    		<br> 
    		<input type="submit" value="提交" />
    	</form>
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求: 1. 选择不可用的文本输入框 2. 显示选择爱好 的个数 3. 显示选择的城市名称 */ //1. 选择不可用的文本输入框 $(':text:disabled').css('background', 'red') //2. 显示选择爱好 的个数 console.log($(':checkbox:checked').length) //3. 显示选择的城市名称 $(':submit').click(function() { var city = $('select>option:selected').html() // 选择的option的标签体文本 //city = $('select').val() // 选择的option的value属性值 alert(city) }) </script>
    </body>
    </html>

--------------------

# $工具方法 type() isArray() isFunction() #

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>09_$工具方法</title>
    </head>
    <body>
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> //1. $.each(): 遍历数组或对象中的数据 var obj = { name : 'Tom', setName : function(name) { this.name = name } } $.each(obj, function(key, value) { console.log(key, value) }) //2. $.trim(): 去除字符串两边的空格 var str = ' hello ' console.log($.trim(str)) //3. $.type(obj): 得到数据的类型 console.log($.type($)) // 'function' //4. $.isArray(obj): 判断是否是数组 console.log($.isArray($('body')), $.isArray([])) // false true //5. $.isFunction(obj): 判断是否是函数 console.log($.isFunction($)) // true //6. $.parseJSON(json) : 解析json字符串转换为js对象/数组 var json = '{"name":"Tom", "age":12}' // json对象: {} // json对象===>JS对象 console.log($.parseJSON(json)) json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: [] // json数组===>JS数组 console.log($.parseJSON(json)) /* JSON.parse(jsonString) json字符串--->js对象/数组 JSON.stringify(jsObj/jsArr) js对象/数组--->json字符串 */ </script>
    </body>
    </html>

--------------------

# 属性相关方法 attr() removeAttr() prop() #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>10_属性</title>
    </head>
    <body>
    
    	<div id="div1" class="box" title="one">class为box的div1</div>
    	<div id="div2" class="box" title="two">class为box的div2</div>
    	<div id="div3">div3</div>
    	<span class="box">class为box的span</span>
    	<br />
    	<ul>
    		<li>AAAAA</li>
    		<li title="hello" class="box2">BBBBB</li>
    		<li class="box">CCCCC</li>
    		<li title="hello">DDDDDD</li>
    		<li title="two"><span>BBBBB</span></li>
    	</ul>
    
    	<input type="text" name="username" value="guiguClass" />
    	<br>
    	<input type="checkbox">
    	<input type="checkbox">
    	<br>
    	<button>选中</button>
    	<button>不选中</button>
    
    	
    
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求: 1. 读取第一个div的title属性 2. 给所有的div设置name属性(value为atguigu) 3. 移除所有div的title属性 4. 给所有的div设置class='guiguClass' 5. 给所有的div添加class='abc' 6. 移除所有div的guiguClass的class 7. 得到最后一个li的标签体文本 8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>" 9. 得到输入框中的value值 10. 将输入框的值设置为atguigu 11. 点击'全选'按钮实现全选 12. 点击'全不选'按钮实现全不选 */ //1. 读取第一个div的title属性 // console.log($('div:first').attr('title')) // one //2. 给所有的div设置name属性(value为atguigu) // $('div').attr('name', 'atguigu') //3. 移除所有div的title属性 // $('div').removeAttr('title') //4. 给所有的div设置class='guiguClass' //$('div').attr('class', 'guiguClass') //5. 给所有的div添加class='abc' //$('div').addClass('abc') //6. 移除所有div的guiguClass的class //$('div').removeClass('guiguClass') //7. 得到最后一个li的标签体文本 //console.log($('li:last').html()) //8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>" //$('li:first').html('<h1>mmmmmmmmm</h1>') //9. 得到输入框中的value值 //console.log($(':text').val()) // 读取 //10. 将输入框的值设置为atguigu //$(':text').val('atguigu') // 设置 读写合一 //11. 点击'全选'按钮实现全选 // attr(): 操作属性值为非布尔值的属性 // prop(): 专门操作属性值为布尔值的属性 var $checkboxs = $(':checkbox') $('button:first').click(function() { $checkboxs.prop('checked', true) }) //12. 点击'全不选'按钮实现全不选 $('button:last').click(function() { $checkboxs.prop('checked', false) }) </script>
    </body>
    </html>

--------------------

# 与css样式有关的方法 ※ #

--------------------

## css() ##

之前有所提及。css()，可以设置css样式/读取css值。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>11_css</title>
    </head>
    <body>
    	<p style="color: blue;">尚硅谷的后裔</p>
    	<p style="color: green;">太阳的后裔</p>
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 1. 得到第一个p标签的颜色 2. 设置所有p标签的文本颜色为red 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px) */ //1. 得到第一个p标签的颜色 //console.log($('p:first').css('color')) //2. 设置所有p标签的文本颜色为red //$('p').css('color', 'red') //3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px) $('p:eq(1)').css({ color : '#ff0011', background : 'blue', width : 300, height : 30, }) </script>
    </body>
    </html>

--------------------

## offset()和postion() ##

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>12_offset和position</title>
    </head>
    <style type="text/css"> * { margin: 0px; } .div1 { position: absolute; width: 200px; height: 200px; top: 20px; left: 10px; background: blue; } .div2 { position: absolute; width: 100px; height: 100px; top: 50px; background: red; } .div3 { position: absolute; top: 250px; } </style>
    <body style="height: 2000px;">
    
    	<div class="div1">
    		<div class="div2">测试offset</div>
    	</div>
    	<div class='div3'>
    		<button id="btn1">读取offset和position</button>
    		<button id="btn2">设置offset</button>
    	</div>
    
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script type="text/javascript"> /* 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打印 div2 相对于页面左上角的位置 打印 div1 相对于父元素左上角的位置 打印 div2 相对于父元素左上角的位置 2. 点击 btn2 设置 div2 相对于页面的左上角的位置 */ $('#btn1').click(function() { // 打印 div1 相对于页面左上角的位置 var offset = $('.div1').offset() console.log(offset.left, offset.top) // 10 20 // 打印 div2 相对于页面左上角的位置 offset = $('.div2').offset() console.log(offset.left, offset.top) // 10 70 // 打印 div1 相对于父元素左上角的位置 var position = $('.div1').position() console.log(position.left, position.top) // 10 20 // 打印 div2 相对于父元素左上角的位置 position = $('.div2').position() console.log(position.left, position.top) // 0 50 }) $('#btn2').click(function() { $('.div2').offset({ left : 50, top : 100 }) }) </script>
    </body>
    </html>

--------------------

## 元素滚动 scrollTop() ##

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

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>13_元素滚动</title>
    </head>
    <body style="height: 2000px;">
    	<div style="border: 1px solid black; width: 100px; height: 150px; overflow: auto">
    		This is some text. This is some text. This is some text. This is some
    		text. This is some text. This is some text. This is some text. This is
    		some text. This is some text. This is some text. This is some text.
    		This is some text. This is some text. This is some text. This is some
    		text. This is some text. This is some text. This is some text. This is
    		some text. This is some text. This is some text. This is some text.
    		This is some text. This is some text. his is some text.</div>
    	<br>
    	<br>
    	<br>
    	<button id="btn1">得到scrollTop</button>
    	<button id="btn2">设置scrollTop</button>
    
    	
    	<script src="js/jquery-1.10.1.js"></script>
    	<script> /* 需求: 1. 得到div或页面滚动条的坐标 2. 让div或页面的滚动条滚动到指定位置 */ //1. 得到div或页面滚动条的坐标 $('#btn1').click(function() { console.log($('div').scrollTop()) // console.log($('html').scrollTop()+$('body').scrollTop()) console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()) // 兼容IE/Chrome }) //2. 让div或页面的滚动条滚动到指定位置 $('#btn2').click(function() { $('div').scrollTop(200) $('html,body').scrollTop(300) }) </script>
    </body>
    </html>

--------------------

## 元素的尺寸 height() width() innerHeight() innerWidth() outerHeight() outerWidth() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 7]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>14_元素的尺寸</title>
    </head>
    <style> div { width: 100px; height: 150px; background: red; padding: 10px; border: 10px #fbd850 solid; margin: 10px; } </style>
    </head>
    <body>
    	<div>div</div>
    	
    	<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
    	<script> var $div = $('div') // 1. 内容尺寸 console.log($div.width(), $div.height()) // 100 150 // 2. 内部尺寸 console.log($div.innerWidth(), $div.innerHeight()) //120 170 // 3. 外部尺寸 console.log($div.outerWidth(), $div.outerHeight()) //140 190 console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210 </script>
    </body>
    </html>

--------------------

# 本文涉及的方法 #

内容截取自jQuery1.7 中文手册 或 jQuery1.11.3 中文手册

## html() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]

--------------------

## val() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 9]

--------------------

## addClass() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 10]

--------------------

## appendTo() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 12]

--------------------

## each() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 13]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 14]

--------------------

## trim() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 15]

--------------------

## click() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 16]

--------------------

## size() / length ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 17]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 18]

--------------------

## get(index) ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 19]

--------------------

## index() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 20]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 21]

--------------------

## css() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 22]  
![在这里插入图片描述][20200411153753845.png]

--------------------

## attr() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 23]

--------------------

## removeAttr() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 24]

--------------------

## prop() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 25]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 26]

--------------------

## eq() ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 27]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70]: /images/20230528/4e3db603e4a1425597b4ab8a05ae4845.png
[https_www.jianshu.com_p_94db9d69fd1f]: https://www.jianshu.com/p/94db9d69fd1f
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 1]: /images/20230528/34618704791440e2b45368926d1476ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 2]: /images/20230528/e8cf014434f34c8b983a3e63c380e468.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 3]: /images/20230528/62418c4d627542889eae0ee683596d26.png
[20200411140757764.png]: /images/20230528/17246a05f57044a8a851e4111cd4302e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 4]: /images/20230528/5da09fd207f242ec9631a6d0945090c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 5]: /images/20230528/192ce723a9be47359118e90e170bf73b.png
[20200411154921278.png]: /images/20230528/44e89dc1dba64da2b9e39d8ca1f69c56.png
[20200411160538461.png]: /images/20230528/edfc87f719ea4b2aa026d6f7f353c5ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 6]: /images/20230528/c4a16b3a15944b7aaf686e22c4782987.png
[20200411165344665.png]: /images/20230528/2a57a1f7bf254edf8f03c6230e713f5c.png
[20200411170043232.png]: /images/20230528/236c0900809149059c37a168f97e9f88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 7]: /images/20230528/4c208e615b2241e8a255e67d2b1ac7c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 8]: /images/20230528/d78a1ccf024d41228cfb67cb4ebabded.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 9]: /images/20230528/399173f8cadc4e53873ecc26bd848ce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 10]: /images/20230528/6e6b310d9cac403b9ded6d6ed779d0ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 11]: /images/20230528/5aafc40abd14465298dee996b14c2341.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 12]: /images/20230528/4b729949cd55403abc641aea42d1c512.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 13]: /images/20230528/40a54488d7c548f49a9cf6f36c03a951.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 14]: /images/20230528/3d709d12acb24887a274caf773214803.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 15]: /images/20230528/b129f70765b548868d6c734236076b11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 16]: /images/20230528/fb888e4b98ac4ecc9274e6bd640a1a47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 17]: /images/20230528/d11975cd59f048958f826b6031cf9f92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 18]: /images/20230528/54b44a548b94493a9483947f070f5d53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 19]: /images/20230528/db0981b38bae4733a22277fa0d9c4849.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 20]: /images/20230528/328cae17d3134ab59ff6f563f29467ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 21]: /images/20230528/7d84512c58fd43dbb00459c7ba7aeab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 22]: /images/20230528/8666aa5fcd9a4bbe8ce78a9257b4ee2d.png
[20200411153753845.png]: /images/20230528/90add94271ab4445ac7e4035b48116d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 23]: /images/20230528/0a23cf503b7d4ab5a37ba4aa4f9a5702.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 24]: /images/20230528/b115d8f8947a4072b674a9cd2caf13be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 25]: /images/20230528/410d3081a5de4b88a6efc4f4ef43b52b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 26]: /images/20230528/5c5a570eab334c2894db3431428a1c37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70 27]: /images/20230528/11eb4a95d9bb4bef8f74cd0a681495aa.png