Python开发【jQuery篇】

jQuery

http://jquery.cuishifeng.cn/

模块 《=》类库
DOM/BOM/JavaScript的类库

版本:
1.x 1.12
2.x
3.x

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


一、查找元素
DOM
10左右
jQuery:
选择器,直接找到某个或者某类标签
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')

实例:
多选,反选,全选
- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环: $('#tb:checkbox').xxxx

- $('#tb:checkbox').each(function(k){
// k当前索引
// this,DOM,当前循环的元素 $(this)

})
- var v = 条件 ? 真值 : 假值


筛选


$('#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)

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

$(..).html()
$(..).html("<a>1</a>")

$(..).val()
$(..).val(..)
样式操作:
addClass
removeClass
toggleClass

属性操作:
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')

<input type='checkbox' id='i1' />


# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)

PS:
index 获取索引位置

文档处理:
append
prepend
after
before

remove
empty

clone
css处理

$('t1').css('样式名称', '样式值')
点赞:
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小,位置
位置:
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])

offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标

position() 指定标签相对父标签(relative)标签的坐标
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>


$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ?
$('i1').outerHeight() # 获取边框 + 纯高度 + ?
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ?

# 纯高度,边框,外边距,内边距

事件
DOM: 三种绑定方式
jQuery:
$('.c1').click()
$('.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(){

})

阻止事件发生
return false

# 当页面框架加载完成之后,自动执行
$(function(){

$(...)

})

jQuery扩展:
- $.extend $.方法
- $.fn.extend $(..).方法

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


二、操作元素

===》实例:

作业:
一:
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ?
$('i1').outerHeight() # 获取边框 + 纯高度 + ?
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ?

# 纯高度,边框,外边距,内边距

二、所有实例敲一遍

三、编辑框





上一篇:易语言 字节集转位图源码(exe转图片)


下一篇:Java基础巩固系列 包装类