D17——C语言基础学PYTHON

Posted m1racle

tags:

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

C语言基础学习PYTHON——基础学习D17

 

20181014内容纲要：

　　1、jQuery介绍

　　2、jQuery功能介绍

　　　　（1）jQuery的引入方式

　　　　（2）选择器

　　　　（3）筛选

　　　　（4）文本操作

　　　　（5）样式操作

　　　　（6）属性操作

　　　　（7）文本处理

　　　　（8）css处理

　　　　（9）位置

　　　　（10）事件

　　　　（11）jQuery扩展

　　3、实例展示

　　4、小结

　　5、推荐

 

1 jQuery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

 

官方网站列出了下列支持jQuery的浏览器：

 

　　FirefoX 2．0+

 

　　Internet Explorer 6+

 

　　Safari 3+

 

　　Opera 10．6+

 

　　Chrome 8+

 

2 jQuery功能介绍

（1）jQuery的引入方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--css的两种引入方式-->
 7     <link rel="stylesheet" href="csswenjian">
 8     <style>
 9 
10     </style>
11 
12 </head>
13 <body>
14     <div id="i1">123</div>
15 
16        <!--jQuery的两种引入方式-->
17     <script src="jquery-1.12.4.js"></script>
18     <script>
19         $("#i1")
20     </script>
21 </body>
22 </html>
js的两种引入方式

（2）选择器

1. id
                $(\'#id\')
            2. class
                <div class=\'c1\'></div>
                $(".c1")
            3. 标签
                <div id=\'i10\' class=\'c1\'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class=\'c1\'>
                    <a>f</a>
                </div>
                <div class=\'c1\'>
                    <div class=\'c2\'> </div>
                </div>
                
                $(\'a\')
                
            4. 组合a
                <div id=\'i10\' class=\'c1\'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class=\'c1\'>
                    <a>f</a>
                </div>
                <div class=\'c1\'>
                    <div class=\'c2\'> </div>
                </div>
                
                $(\'a\')
                $(\'.c2\')
                
                $(\'a,.c2,#i10\')
                
            5. 层级
                $(\'#i10 a\') 子子孙孙
                $(\'#i10>a\') 儿子
                
            6. 基本
                :first
                :last
                :eq()
            7. 属性
                $(\'[alex]\')       具有alex属性的所有标签
                $(\'[alex="123"]\') alex属性等于123的标签
                
            
                <input type=\'text\'/>
                <input type=\'text\'/>
                <input type=\'file\'/>
                <input type=\'password\'/>
                
                $("input[type=\'text\']")
                $(\':text\')
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <input type="button" value="全选" onclick="checkAll();">
10     <input type="button" value="反选" onclick="reverseAll();">
11     <input type="button" value="取消" onclick="cancelAll();">
12     <table border="1">
13         <thead>
14             <tr>
15                 <th>选项</th>
16                 <th>IP</th>
17                 <th>端口</th>
18             </tr>
19         </thead>
20         <tbody class="tb">
21             <tr>
22                 <td><input type="checkbox" /></td>
23                 <td>1.1.1.1</td>
24                 <td>80</td>
25 
26             </tr>
27             <tr>
28                 <td><input type="checkbox" /></td>
29                 <td>1.1.1.1</td>
30                 <td>80</td>
31 
32             </tr>
33             <tr>
34                 <td><input type="checkbox" /></td>
35                 <td>1.1.1.1</td>
36                 <td>80</td>
37 
38             </tr>
39             <tr>
40                 <td><input type="checkbox" /></td>
41                 <td>1.1.1.1</td>
42                 <td>80</td>
43 
44             </tr>
45             <tr>
46                 <td><input type="checkbox" /></td>
47                 <td>1.1.1.1</td>
48                 <td>80</td>
49             </tr>
50         </tbody>
51     </table>
52 
53     <script src="jquery-1.11.3.js"></script>
54     <script>
55         function checkAll() {
56             $(":checkbox").prop(\'checked\',true);
57         }
58         function cancelAll() {
59             $(\':checkbox\').prop(\'checked\',false);
60         }
61         function reverseAll() {
62             $(":checkbox").each(function (k) {
63                 //this 代指当前循环的每一个元素
64                 //console.log(k,this)
65                 //这是通过Dom实现的反选
66                 /*if(this.checked){
67                     this.checked = false;
68                 }
69                 else{
70                     this.checked = true;
71                 }*/
72                 //这是jquery实现的反选
73                 /*if($(this).prop(\'checked\')){
74                     $(this).prop(\'checked\',false);
75                 }else {
76                     $(this).prop(\'checked\',true);
77                 }*/
78                 //三元运算
79                 var v = $(this).prop("checked")?false:true;
80                 $(this).prop("checked",v)
81             })
82         }
83     </script>
84 </body>
85 </html>
实例（全选取消反选）
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .header{
 8             background-color: black;
 9             color: wheat;
10         }
11         .content{
12             min-height: 50px;
13         }
14         .hide{
15             display: none;
16         }
17     </style>
18 </head>
19 <body>
20     <div style="height: 400px;width: 200px;border: 1px solid #dddddd">
21         <div class="item">
22             <div class="header">标题1</div>
23             <div class="content">内容1</div>
24         </div>
25         <div class="item">
26             <div class="header">标题2</div>
27             <div class="content hide">内容2</div>
28         </div>
29         <div class="item">
30             <div class="header">标题3</div>
31             <div class="content hide">内容3</div>
32         </div>
33     </div>
34     <script src="jquery-1.12.4.js"></script>
35     <script>
36         $(".header").click(function () {
37             //console.log(this);
38             //获取当前标签 $(this)
39             //获取某个标签的下一个标签
40             //获取某个标签的父标签
41             //获取所有的兄弟标签
42             //添加、移除样式
43 
44             //链式编程
45              //$(this).next().removeClass(\'hide\');
46              //$(this).parent().siblings().find(\'.content\').addClass(\'hide\');
47             $(this).next().removeClass(\'hide\').parent().siblings().find(\'.content\').addClass(\'hide\');
48         })
49     </script>
50 </body>
51 </html>
实例（展开折叠）

（3）筛选

筛选
                $(\'#i1\').next()
                $(\'#i1\').nextAll()
                $(\'#i1\').nextUntil(\'#ii1\')
                
                <div>
                    <a>asdf</a>
                    <a>asdf</a>
                    <a id=\'i1\'>asdf</a>
                    <a>asdf</a>
                    <a id=\'ii1\'>asdf</a>
                    <a>asdf</a>
                </div>
                
                $(\'#i1\').prev()
                $(\'#i1\').prevAll()
                $(\'#i1\').prevUntil(\'#ii1\')
                
                
                $(\'#i1\').parent()
                $(\'#i1\').parents()
                $(\'#i1\').parentsUntil()
                
                $(\'#i1\').children()
                $(\'#i1\').siblings()
                $(\'#i1\').find()
                $(\'li:eq(1)\')
                $(\'li\').eq(1)
                first()
                last()
                hasClass(class)

（4）文本操作

文本操作：
                $(..).text()           # 获取文本内容
                $(..).text(“<以上是关于D17——C语言基础学PYTHON的主要内容，如果未能解决你的问题，请参考以下文章
 

 新手学Python需要用啥书


 学python用啥编译器啊，哪位大佬推荐一下


 学python要多久


 Python面向对象学习之八，装饰器


 C语言代码片段


 D04-C语言基础学PYTHON