jQuery入门

十一月 5, 2019 jQuery学习本文总阅读量次

补充：结构层、表示层、行为层

结构层：HTML文件
表示层：CSS文件
行为层：JS文件

id尽量留给行为层，表示层中多选元素时尽量使用标签（元素）选择器，需要单独选中某些元素时可使用class，总得来说就是属性越少越好，css中尽量少用id（优先级问题）

jQuery

jQuery是一个JavaScript函数库
jQuery是一个轻量级的“写得少，做的多”的JavaScript库

jQuery引用

先去下载jQuery文件
使用jQuery只需要在页面的中引入jQuery 文件即可（注意需要在引入自己的js文件的上面先引入jQuery 文件）

$的使用

$是一个变量。
jQuery 把所有功能全部封装在一个全局变量jQuery中，而$
也是一个合法的变量名，它是变量jQuery的别名。(变量$冲突时可以使用变量jQuery代替它)
绝大多数时候，我们都直接用$。
若$变量已被占用，且不能改，就只能使用jQuery 这个变量。（**$===jQuery**）

jQuery语法

基础语法： $(selector).action()

美元符:定义 jQuery
选择符（selector）:“查询”和”查找” HTML 元素
jQuery 的 action(): 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件

建议使用下面的方式写jquery：

1
2
3

$(document).ready(function(){
$('div').addClass('div');//这中间写的是jquery代码
});

将jquery代码包含在$(document).ready(function(){}中而不是直接在js文件中书写jquery代码的原因是：我们在html文件中加载js文件是从上至下的，此时jquery代码的js文件放在head中，这就导致运行该js文件时body中的元素还未加载，也就是例子中的div都还不存在，$(document).ready(function(){}的意思就是等到document都准备好了才运行其中的代码。

提示：简洁写法（与以上写法效果相同）:

$(function(){
 
   // 开始写 jQuery 代码...
 
});

补充：HTML`<nav>`标签

<nav> 标签定义导航链接的部分,是 HTML 5 中的新标签。
例子

补充：vscode同时选中多行输入

按shift+alt，再使用鼠标拖动，可以出现竖直的列光标，同时可以选中多列进行输入。

jquery中HTML方法

html() 方法设置innerHTML

html() 方法设置或返回被选元素的内容（innerHTML）。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法。
例子

语法：
返回内容：

1	$(selector).html()

设置内容：

1	$(selector).html(content)

使用函数设置内容：

1	$(selector).html(function(index,currentcontent))

content:必需。规定被选元素的新内容（可包含 HTML 标签）。
function(index,currentcontent)：可选。规定返回被选元素的新内容的函数。
index - 返回集合中元素的 index 位置。
currentcontent - 返回被选元素的当前 HTML 内容。

jquery中CSS方法

`.eq`方法用于选择元素

选取带有指定 index 值的元素。
语法：$(":eq(index)")
可参考菜鸟教程

`.css`方法用于修改css样式

css() 方法设置或返回被选元素的一个或多个样式属性。
返回语法：css("propertyname");,比如$("p").css("background-color");
设置语法：css("propertyname","value");，比如$("p").css("background-color","yellow");
设置多个CSS属性语法：css({"propertyname":"value","propertyname":"value",...});,如$("p").css({"background-color":"yellow","font-size":"200%"});
可参考菜鸟教程