jquery直接执行 jquery操作

转载

架构思维大师 2023-11-18 20:07:22

文章标签 jquery直接执行 jquery javascript 前端选择器 文章分类 jQuery 前端开发

这里写自定义目录标题

1、jquery介绍
2、jquery简单应用
3、jQuery核心函数
4、jquery对象与DOM对象
5、jquery对象与DOM对象的区别
6、dom对象与jquery对象的互转
7、jquery选择器

7.1、基本选择器
7.2、层级选择器

7.4、过滤选择器

7.4.1、基本过滤器
7.4.2、内容过滤器
7.4.3、属性过滤器：
7.4.4、表单过滤器
7.4.5、表单对象属性过滤器
7.4.6、jQuery 元素筛选

8、jquery属性操作
9、jquery操作css样式
10、jquery动画
11、jquery事件

1、jquery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由[John
Resig](https://baike.baidu.com/item/John
Resig/6336344)发布。jQuery设计的宗旨是“write Less，Do
More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2、jquery简单应用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../jquery-1.7.2.js"></script>
  <script type="text/javascript">
  </script>
</head>
<body>
<button id="btn">你好,小改改</button>
</body>
</html>

实际上，jquery的出现就是为了让原来的js代码变得更加简洁简单
在写jquery代码之前，我们必须引用jquery库

3、jQuery核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。
1、传入参数为函数时：
表示页面加载完成之后，相当于js代码的 window.onload = function(){}
2、传入参数为html字符串时
会为我们创建这个html标签对象
3、传入参数为选择器字符串时：
$(“#id 属性值”); id 选择器
$(“标签名”); 标签名选择器
$(“.class 属性值”); 类型选择器
4、传入DOM对象时：
会把这个DOM对象转换为jquery对象

4、jquery对象与DOM对象

DOM对象：
1.通过 getElementById()查询结果是 Dom 对象
2.通过 getElementsByName()查询结果是 Dom 对象
3.通过 getElementsByTagName()查询出来结果是 Dom 对象
4.通过 createElement() 方法创建的对象，是 Dom 对象
jquery对象：
1.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
2.通过 JQuery 包装的 Dom 对象，是 JQuery 对象
3.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象

5、jquery对象与DOM对象的区别

jQuery 对象不能使用 DOM 对象的属性和方法
DOM 对象也不能使用 jQuery 对象的属性和方法

6、dom对象与jquery对象的互转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript" src="../jquery-1.7.2.js"></script>
  <script type="text/javascript">
  $(function (){
      // document.getElementById("btn1").innerHTML = "这是dom对象";
      $("#btn1").click(function (){
          // alert("click是jquery对象的方法");
      });

      //dom对象转jquery对象
      //dom对象
      // alert(document.getElementById("btn1"));
      //jquery对象
      // alert($(document.getElementById("btn1")))

      //jquery对象转dom对象
      // alert($(document.getElementById("btn1"))[0])
      
  });
  </script>
</head>
<body>
<div id="btn1">这是dom对象属性</div>
<button id="btn">德玛西亚</button>
</body>
</html>

7、jquery选择器

#ID 选择器：根据 id 查找标签对象

jquery直接执行 jquery操作_前端_02

.class 选择器：根据 class 查找标签对象

jquery直接执行 jquery操作_前端_03

element 选择器：根据标签名查找标签对象 *

jquery直接执行 jquery操作_选择器_04

“*” 选择器：表示任意的，所有的元素

jquery直接执行 jquery操作_选择器_05

7.1、基本选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

7.2、层级选择器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

7.4、过滤选择器

7.4.1、基本过滤器

:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3 之类的标题元素
:animated 匹配所有正在执行动画效果的元素

7.4.2、内容过滤器

:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:parent 匹配含有子元素或者文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素

7.4.3、属性过滤器：

[attribute] 匹配包含给定属性的元素。
[attribute=value]匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结尾的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。

7.4.4、表单过滤器

:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有文本输入框
:password匹配所有的密码输入框
:radio 匹配所有的单选框
:checkbox 匹配所有的复选框
:submit 匹配所有提交按钮
:image 匹配所有 img 标签
:reset 匹配所有重置按钮
:button 匹配所有 input type=button 按钮
:file 匹配所有 input type=file 文件上传
:hidden 匹配所有不可见元素 display:none 或 input type=hidden

7.4.5、表单对象属性过滤器

:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
:selected匹配所有选中的 option

7.4.6、jQuery 元素筛选

eq() 获取给定索引的元素
first() 获取第一个元素
last() 获取最后一个元素
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp) 返回包含有匹配选择器的元素的元素
not(exp) 删除匹配选择器的元素
children(exp) 返回匹配给定选择器的子元素
find(exp) 返回匹配给定选择器的后代元素
next() 返回当前元素的下一个兄弟元素
nextAll() 返回当前元素后面所有的兄弟元素
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
siblings(exp) 返回所有兄弟元素
add() 把 add 匹配的选择器的元素添加到当前 jquery 对象中

8、jquery属性操作

html() 设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。
text() 设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。
val() 设置和获取表单项的 value 属性值。跟 dom 属性 value 一样
attr()设置和获取属性的值，尽量不用 checked、readOnly、selected、disabled 等方法
attr 操作非标准的属性。比如自定义属性：abc,bbj prop() 可以

设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled 等等

9、jquery操作css样式

addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除，没有就添加。
offset() 获取和设置元素的坐标。

10、jquery动画

show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示。
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出切换

11、jquery事件

click() 绑定单击事件，触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 给元素一次性绑定一个或多个事件。
one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
unbind() 解除事件的绑定
live() 绑定选择器匹配的所有元素的事件

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。