码迷,mamicode.com
首页 > 编程语言 > 详细

Python Day17(jQuery)

时间:2017-08-04 22:52:14      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:var   lan   center   position   过滤   cursor   元素   ddc   less   

一、概述

1.简介

    jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的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+等。
 
参考中文文档:http://jquery.cuishifeng.cn/
 
jQuery是什么?
    jQuery跟python里面的模块一样,它相当于是一个封装了DOM/BOM/JavaScriptd的一个模块。
 
版本选择?
     jQuery版本有很多,1.*,2.*,3.*,一般我们选择1.*的最高版本,因为比较稳定,兼容性好。
 
jQuery对象和Dom对象的转换?
  • jquery对象[索引] => Dom对象
  • $(Dom对象)  => jquery对象

二、选择器

1.id选择器

$("#id")

2.class选择器

$(".c1")

3.标签选择器

$("a")

4.组合选择器

$("a,.c1,#i1")

5.层级选择器

$("#i1 a") 找子子孙孙
$("#i1>a") 只找儿子

6.基本筛选器

:first     第一个
:last      最后一个
:eq(index) 根据索引来取

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     <meta http-equiv="x-ua-compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title>Title</title>
 8 </head>
 9 <body>
10     <div id="menu1">
11         <input type="button" value="全选" />
12         <input type="button" value="反选" />
13         <input type="button" value="取消" />
14     </div>
15     <div>
16         <table border="1" width="300px" style="text-align: center">
17             <thead>
18                 <tr>
19                     <th>选择</th>
20                     <th>序号</th>
21                     <th>用户名</th>
22                 </tr>
23             </thead>
24             <tbody id="table1">
25                 <tr>
26                     <td><input type="checkbox"></td>
27                     <td>1</td>
28                     <td>breakering</td>
29                 </tr>
30                 <tr>
31                     <td><input type="checkbox"></td>
32                     <td>2</td>
33                     <td>profhua</td>
34                 </tr>
35                 <tr>
36                     <td><input type="checkbox"></td>
37                     <td>3</td>
38                     <td>wolf</td>
39                 </tr>
40             </tbody>
41         </table>
42     </div>
43     <script src="jquery-1.12.4.js"></script>
44     <script>
45         $("#menu1 :input[value=‘全选‘]").click(function () {
46             $("#table1 :checkbox").prop("checked", true);
47         });
48         $("#menu1 :input[value=‘反选‘]").click(function () {
49             $("#table1 :checkbox").each(function () {
50                 $(this).prop("checked", $(this).prop("checked") ? false : true)
51             })
52         });
53         $("#menu1 :input[value=‘取消‘]").click(function () {
54             $("#table1 :checkbox").prop("checked", false);
55         });
56     </script>
57 </body>
58 </html>
View Code

三、筛选器

1.过滤

eq(index)        # 根据索引来获取对象  eg:$("li").eq(1) == $("li :eq(1)")
first()          # 获取第一个
last()           # 获取最后一个
hasClass(class)  # 是否有具有某类CSS样式

2.查找

children()       # 所有的孩子
siblings()       # 所有的兄弟姐妹
find()           # 搜索与表达式匹配的元素
next()           # 下一个
nextAll()        # 后面的所有元素
nextUntil()      # 下一个直到什么为止(不包含)
prev()           # 上一个
prevAll()        # 上面的所有元素
prevUntil()      # 上一个直到什么为止(不包含)
parent()         # 父标签
parents()        # 所有的父标签
parentsUntil()   # 所有的父标签直到什么为止(不包含)

3.文本操作

$(..).text()           # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容

$(..).html()           # 获取html内容
$(..).html("<a>1</a>") # 设置html内容

$(..).val()            # 获取val的值
$(..).val(..)          # 设置val的值

4.样式操作

addClass()     # 添加一类样式
removeClass()  # 移除一类样式
toggleClass()  # 如果存在(不存在)就删除(添加)一类样式

5.属性操作

# 专门用于做自定义属性
$(..).attr(‘n‘)          # 获取属性值
$(..).attr(‘n‘,‘v‘)      # 设置属性值
$(..).removeAttr(‘n‘)    # 移除属性


# 专门用于chekbox,radio
$(..).prop(‘checked‘)    # 获取属性
$(..).prop(‘checked‘, true)  # 设置属性

切换菜单:

技术分享
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .menu{
11             height: 38px;
12             background-color: #eeeeee;
13             line-height: 38px;
14         }
15         .active{
16             background-color: brown;
17         }
18         .menu .menu-item{
19             float: left;
20             border-right: 1px solid red;
21             padding: 0 5px;
22             cursor: pointer;
23         }
24         .content{
25             min-height: 100px;
26             border: 1px solid #eeeeee;
27         }
28     </style>
29 </head>
30 <body>
31 
32     <div style="width: 700px;margin:0 auto">
33 
34         <div class="menu">
35             <div class="menu-item active">菜单一</div>
36             <div class="menu-item">菜单二</div>
37             <div class="menu-item">菜单三</div>
38         </div>
39         <div class="content">
40             <div>内容一</div>
41             <div class="hide">内容二</div>
42             <div class="hide">内容三</div>
43 
44         </div>
45 
46     </div>
47     <script src="jquery-1.12.4.js"></script>
48     <script>
49         $(".menu-item").click(function () {
50             $(this).addClass("active").siblings().removeClass("active");
51             $(".content").children().eq($(this).index()).removeClass("hide").siblings().addClass("hide");
52         })
53     </script>
54 </body>
55 </html>
View Code

6.文档处理

append()     # 内部加在末尾
prepend()    # 内部加在开头

after()      # 外部加在末尾
before()     # 外部加在开头

remove()     # 移除整个标签
empty()      # 清空标签的内容
     
clone()      # 克隆标签

7.CSS处理

$(‘t1‘).css(‘样式名称‘, ‘样式值‘)

# 位置
$(window).scrollTop()        # 获取
$(window).scrollTop(0)       # 设置
$(window).scrollLeft([val])

offset().left                # 指定标签在html中的坐标
offset().top                 # 指定标签在html中的坐标
position()                   # 指定标签相对父标签(relative)标签的坐标

height()                     # 获取某个元素的高度        
innerHeight()                # 获取某个元素的高度 + 内边距 padding
outerHeight()                # 获取某个元素的高度 + 内边距 padding + 边框 border
outerHeight(true)            # 获取某个元素的高度 + 内边距 padding + 边框 border + 外边距 margin

width()                      # 获取某个元素的宽度
innerWidth()                 # 获取某个元素的宽度 + 内边距 padding
outerWidth()                 # 获取某个元素的宽度 + 内边距 padding + 边框 border
outerWidth(true)             # 获取某个元素的宽度 + 内边距 padding + 边框 border + 外边距 margin

四、其他

1.事件绑定
# 第一种
$(‘.c1‘).click(function(){

})
$(‘.c1‘).....

# 第二种
$(‘.c1‘).bind(‘click‘,function(){
})

$(‘.c1‘).unbind(‘click‘,function(){

})

# 第三种(重要,委托)
$(‘.c‘).delegate(‘a‘, ‘click‘, function(){

})
$(‘.c‘).undelegate(‘a‘, ‘click‘, function(){

})

# 三种方法内部均调用下面两种方法
$(‘.c1‘).on(‘click‘, function(){

})
$(‘.c1‘).off(‘click‘, function(){

})

2.阻止事件发生:

return false

3.当页面框架加载完成之后,自动执行

$(function(){

    $(...)

})

4.jQuery扩展:

- $.extend       $.方法
- $.fn.extend    $(..).方法

(function(){
    var status = 1;
    // 封装变量
})(jQuery)

Python Day17(jQuery)

标签:var   lan   center   position   过滤   cursor   元素   ddc   less   

原文地址:http://www.cnblogs.com/breakering/p/7287231.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!