jquery

Posted 2020-09-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery相关的知识，希望对你有一定的参考价值。

1.什么是jquery

　　它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery使用户能更方便地处理html documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2.jquery设计思想

　　1）选择网页元素

　　a.模拟css选择元素　　b.独有表达式选择 c.混合筛选方法

　　　$(‘div‘)--元素选择　

　　　$(‘#div‘)--id选择

　　　$(‘.box‘)--类选择

　　代码1：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.10.1.min.js"></script>
 7 </head>
 8 <body>
 9     <div id="div1"  class="box">div</div>
10     <p>hello world</p>
11     <span class="box">span</span>
12 </body>
13 <script>
14   $(‘.box‘).css(‘background‘,‘red‘);
15 </script>
16 </html>

运行后：

技术分享

　$(‘element:first‘)--第一个元素

　$(‘element:last‘)--最后一个元素

　$(‘element:eq(3)‘)---下标为3的元素

代码2：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.10.1.min.js"></script>
 7 </head>
 8 <body>
 9     <ul>
10         <li class="li1"></li>
11         <li class="li1"></li>
12         <li></li>
13         <li></li>
14         <li></li>
15         <li></li>
16     </ul>
17 </body>
18 <script>
19     $(‘li:first‘).css(‘background‘,‘blue‘);//选择第一个元素
20     $(‘li:last‘).css(‘background‘,‘red‘);//选择最后一个元素
21     $(‘li:eq(3)‘).css(‘background‘,‘green‘);//下标为3的元素
22 </script>
23 </html>

运行后：

　　技术分享

　　代码3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.1.min.js"></script>
</head>
<body>
    <ul>
        <li class="li1"></li>
        <li class="li1"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
   $(‘li:even‘).css(‘background‘,‘orange‘);//奇数行变色
    $(‘li:odd‘).css(‘background‘,‘pink‘);//偶数行变色
</script>
</html>

　　运行效果：技术分享

代码4（混合筛选方法）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="jquery-1.10.1.min.js"></script>
 7 </head>
 8 <body>
 9     <ul>
10         <li ></li>
11         <li class="box"></li>
12         <li></li>
13         <li class="box"></li>
14         <li></li>
15         <li></li>
16     </ul>
17 </body>
18 <script>
19   $(‘li‘).filter(‘.box‘).css(‘background‘,‘blue‘);
20 </script>
21 </html>

运行效果：

　　技术分享

以上是关于jquery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段