jquery获取body_jQuery基础语法

最新推荐文章于 2021-07-16 07:58:48 发布

syzyzs

最新推荐文章于 2021-07-16 07:58:48 发布

阅读量5.7k

点赞数 1

文章标签： jquery获取body

本文链接：https://blog.csdn.net/weixin_35876760/article/details/113491430

版权

一、jQuer介绍及安装

1、jQuery介绍

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

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、jQuery使用

下载地址：jQuery CDN

压缩版：https://code.jquery.com/jquery-1.12.4.min.js

正常版：https://code.jquery.com/jquery-1.12.4.js

jquery操作文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

这里我们使用正常版来做实验（方便查看），压缩版的适用于生产，版本使用1.12版本兼容之前版本浏览器。

（1）把`jquery-1.12.4.js`复制到同级目录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">dream</div>
<script src="jquery-1.12.4.js"></script>
<script>
    //jQuery('#1');或者下面那种调用方法
    $('#1');
</script>
</body>
</html>

（2）转换

jquery对象[0]   ===>> Dom对象
$(Dom对象)      ===>> jquery对象

二、查找元素

1、基本选择器

$('#id') ###查找id

$('.class') ###查找class

$('element') ###查找所有指定标签

$('*') ###查找所有

$('a,p,...') ###查找多个标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1" class="c1">
        <a>1</a>
        <a>1</a>
    </div>
    <div class="c1">
        <a>1</a>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

2、层级选择器

$('#i1 a')                 ###获取id为i1下面的所有a标签
$('#i1>a')                 ###父子，只会一层

3、基本筛选器

（1）命令说明

$('li:first'); ###找出第一个 $('li:last'); ###找出最后一个 $('tr:eq(index)'); ###通过index查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script src="jquery-1.12.4.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
<script src="jquery-1.12.4.js"></script>
</body>
</html>

（2）层级和first叠加使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div  class="c1">
        <div>
            <a>2</a>

最低0.47元/天解锁文章

syzyzs

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery获取body_jQuery基础语法

一、jQuer介绍及安装1、jQuery介绍jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架），极大简化了JavaScript 编程。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaS...
复制链接

扫一扫