jquery基础知识

爱被打了一巴掌 2022-04-17 01:07 199阅读 0赞

# 1. jquery #

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。  
**jQuery 版本 2 以上不支持 IE6，7，8 浏览器**。

## 1.1 版本 ##

1.x 兼容性更好，支持很多旧的浏览器， ie6,ie7
    3.x 更新，体积更小

## 1.2 使用 ##

导入jquery的js

## 1.3 jquery API ##

1.  基本选择器  
    `#id值, .class值, 标签名`  
    `*` 表示选择所有标签  
    `,` 用来把多个选择器的结果合并

$(“选择器”) write less, do more

document.getElementById();  
document.getElementsByTagName();  
document.querySelector()  
document.querySelectorAll()

1.  层级选择器  
    `空格` 祖先后代选择  
    `>` 父子选择器
2.  筛选器  
    :first 找到结果中的第一个  
    :last 找到结果中的最后一个  
    :eq(n) 找第n个元素（n从0开始）  
    :odd 找下标为奇数的  
    :even 找下标为偶数的

:gt(n) 下标大于n的  
:lt(n) 下标小于n的

p:not(p:first) 取反 除了第一个段落以外的其它段落  
:not(p:first) 取反 除了第一个段落以外的其它所有标签

1.  属性选择器  
    $(“input\[name\]”); // 选中有name属性的input  
    $(“input\[name=aaa\]”); // 选中有name属性，并且值为aaa的input  
    可以同时匹配多个属性  
    $(“input\[type=button\]\[name=aaa\]”); // 必须type是按钮，并且name为aaa的input
2.  子元素选择器  
    :nth-child(n) // 该元素是作为第几个子元素，n从1开始,  
    :first-child // 作为第一个孩子  
    :last-child // 作为最后一个孩子  
    例如：  
    $(“td:nth-child(1)”) // 选中表格中第一列  
    $(“td:nth-child(4)”) // 选中表格中第四列
3.  表单选择器  
    input\[type=button\] 等价于 :button // 匹配所有的按钮  
    :radio // 单选按钮  
    :password // 密码框  
    :checkbox // 复选框  
    :submit // 提交按钮  
    :reset // 重置按钮

:checked // 单选框或复选框是否被选中  
例如：  
:checkbox:checked // 找到被选中的复选框

## 1.4 对标签执行的操作 ##

1.  修改内容  
    .text(); // 获取标签的内容， 功能上等价于：innerText;  
    .text(新内容); // 将标签的内容改为新的 ， 功能上等价于：innerText;  
    .html(); // 获取标签内容 功能上等价于：innerHTML  
    .html(新内容); // 将标签的内容改为新的 功能上等价于：innerHTML  
    .empty(); // 清空内容, 不删除标签
2.  删除标签  
    .remove(); // 删除整个标签， 功能上等价于 子标签.parentNode.removeAttribute(子标签);
3.  修改属性  
    .prop(“属性名”); // 获取属性的值  
    .prop(“属性名”, “新值”); // 修改属性

.val(); // 获取value属性的值  
.val(新值); // 修改value属性的值

1.  样式属性  
    // 推荐用class的方式操作样式  
    .addClass(“样式”); // 操作的标签的class属性, 添加一个class值  
    .removeClass(“样式”); // 操作的标签的class属性, 移除一个class值

.css(“样式名”, “样式值”); // 操作的是style属性, 修改一个style样式  
.css(“样式名”); // 操作的是style属性, 获取一个style样式值

1.  显示隐藏  
    .hide() 隐藏标签 // 操作的是style标签： 加了display:none;  
    .show() 显示标签  
    .toggle() 切换显示与隐藏的效果

.hide(毫秒值); // 会有动画效果，动画效果会持续该毫秒值 .slideUp(); .fadeOut();  
.show(毫秒值); // 会有动画效果，动画效果会持续该毫秒值 .slideDown(); .fadeIn();

1.  尺寸  
    .width(); // 仅包括内容部分的宽度  
    .innerWidth(); // 宽度 = 内容宽度+ 内间距宽度  
    .outerWidth(); // 宽度 = 内容宽度+ 内间距宽度 + 边框宽度

.height();  
.innerHeight();  
.outerHeight();

$(window) // 把原始的window对象，包装成了jquery的window对象， 就具备了jquery中的方法

$(window).width(); // 窗口的宽  
$(window).height();// 窗口的高

动画方法  
.animate(\{样式对象\}, 动画时间); // 其中样式对象，表示动画结束时的坐标  
$(“div:first”).animate(\{left:100\}, 2000);

## 1.5 创建 ##

$("<input>") // 带了尖角号，不是查找input标签，而是创建input标签
    $("input") // 根据input选择器去查找
    
    方法1：
    $("<input>").prop("type", "button").val("按钮").appendTo("body");  // 追加到body, 作为body的子元素
    // 链式调用, 大部分方法返回都是this
    var input = document.createElement("input");
    input.type = "button";
    input.value = "按钮";
    document.body.appendChild(input);
    
    方法2：
    $('<input type="button" value="按钮">').appendTo("body"); // 根据整段的html创建按钮

## 1.6 添加事件 ##

jquery中添加事件，是先用选择器找到要加事件的标签  
$(选择器).事件方法(匿名函数);

$(选择器).click(function()\{ 要执行的代码 \});

要注意整个html的解析顺序，script 如果放在head部分，执行时会找不到body中尚未解析的标签  
一种解决办法是把script 标签放在body的最后  
第二种解决办法是利用jquery提供的ready事件  
$(document).ready(function()\{ … \}); // ready 事件， 会在所有html标签加载完成后触发

$(function()\{ … \}); // 等价写法

### 1.6.1 事件类型 ###

$(选择器).dblclick(…); // 双击  
$(选择器).mouseover(…); // 鼠标移入  
$(选择器).mouseout(…); // 鼠标移出