python学习第十四课－－ JQUERY

选择器
#id element classname
$(“#id”) = $(document.getElementById(“id”)
对于多个classname, 要找到某一个，如
<style>
.abc {background-color: #0000FF}
</style>
<div class=”abc”>hello</div>
<div class=”abc”>hello</div>
<div class=”abc”>hello</div>
使用
<script>
$(function(){
$($(".abc").get(1)).css('background-color','green')
})
</script>
可以找到第二个并把它底色改变
$(".abc").get(1) 是找到第二个class为abc的html element，外层加个$()把它变成jquery的对象，然后就能使用css功能了($(“.abc).get(1) = $(“.abc”)[1] )
也可以使用 $(“.abc”).eq(1).css()

$(“”).size() $(“”).length

群组选择器
$(“span,p,div”)
后代选择器
$(“div p”) 或 $(“div”).find(“p”)
子选择器
$(“div > p”) 或 $(“div”).children(“p”)
通配选择器
$(“*”) 一般不在全局用，浪费资源，而是在某个标签下再使用如 $(“div *”)
标签和classname可以一起使用精确定位，如：
<div class=’abc’>hello</div> $(“div.abc”)
属性选择器
<a title=’num1’>num1</a>
<a title=’num2’> num2 </a>
<a>num3</a>
使用$(“a[titile]”) 可以找到前两个，使用$(“a[titile=num1]”) 会找到第一个

过滤选择器
:first(或.first()) :last(或.last()) :not() (或.not() ) :even :odd :eq() :gt() :lt() :header :focus :animated
内容过滤器
:contains(“text”) 包含文本 text的元素
:empty 不包含文本或子元素的元素
:has(selector) 含有子元素selector的元素
要区别 hasClass(classname) 和 .has(expr|ele)
:parent 包含文本或子元素的元素 ――注意它与.parent()不同,它返回当前元素的父元素（parents() parentsUntil()）
可见性过滤器
:hidden :visible
$(“:hidden”) 找到所有隐藏的元素
$(“div:hidden”) 找到DIV下所有隐藏的元素
筛选
filter() 筛选出与指定表达式匹配的元素集合。用于缩小匹配的范围。用逗号分隔多个表达式,如：
<li>列表1</li>
<li>列表3</li>
<li>列表2</li>
<li>列表7</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
$(function(){
$("li").filter('.abc,:first').css('background','red');
}) 它会将第一个li 和加了class 为 abc的元素加红底
$(function(){
$("li").filter('.abc’).filter(‘:first').css('background','red');
}) 它会将li中的加了class 为 abc且为第一个的元素加红底

基础DOM操作
获取与设置元素内容
html()获取html 内容 text()获取文本内容 val()获取表单中的value值
如果（）中有值，就会设置其内容
<ul><li>列表1</li><li>列表2</li></ul>
<input type="button" value="提交"/>

$(“ul”).html() 会获取 <li>列表1</li><li>列表2</li>
$(“ul”).text() 会获取 列表1列表2
$(“input”).val() 会获取提交

$("ul").html('<li>列表3</li><li>列表4</li>'); 会把原本ul包含的内容改为
<ul><li>列表3</li><li>列表4</li></ul>

$("ul").text('列表5列表6'); 把原本ul包含的内容改为
<ul>列表5列表6</ul>

$("input").val('测试');会把原来的input改为
<input type="button" value="测试"/>
元素属性操作
attr(key) attr(key,value) attr({key1:value1,key2:value2,…})
attr(key,function(index,value){}) value可以使用函数来得到removeAttr(key)
CSS操作
$().css() 如：
$(“div”).css(‘color’) 可以得到 color值
$("div").css({‘color’:'red',’height’:100,’width’:200}) 可以设置div的css的属性
还可以使用函数,如：
$(“div”).css({ ‘color’:function(){},’height’:function(){},.. } )

$().addClass() 可以增加class
$().removeClasss() 删除
$().toggleClass() class之间的切换
例：$('div').click(function(){
$(this).toggleClass(funtion(){
if($(this).hasClass('red')){
$(this).removeClass('red');
return 'green';
}else{
$(this).removeClass('gree');
return 'red';
}
});}

width() height() innerHeight() innerWidth()outerHeight() outerWidth()
$(window).width() 可以得到窗口的宽度 $(document).width()
$("div").width(400) 可以设置div的宽度为400px
也可以使用函数 width(function(index,width){})
offset() position() scrollTop() scrollLeft()
$('div:first').offset().top 得到第一个div的top值
$('div:first').offset({top:100,left:8}) 设置第一个div的top left值

DOM操作
1.创建节点
var box = $(“<div id=’div1’>插入节点</div>”)
2.插入节点
内部插入
$(“div”).append(box)
append(content|function(){}) 可以直接插入内容也可以是函数
appendTo(content)
prepend(content|function(){})
prependTo(content)
外部插入
after(content|function(){})
befor(content|function(){})
insertafter() insertbefor()

3.包裹
wrap(html) wrap(element) wrap(function(){})
unwrap()
wrapAll(html) wrap(element)
wrapInner(html) wrapInner(element) wrapInner(function(){})

4.复制节点clone(true)
如果不加true,只复制元素和内容，如果加true,则元素附带的事件处理行为也复制
5.删除节点remove() detach()
remove删除后不保留事件行为，detach保留
6.清空节点 empty()
7.替换节点 replaceWith() replaceAll()
$('div').replaceWith('<span>node</span>'); 将DIV替换成span
$('<span>node</span>').replaceAll('div'); 同上

表单选择器
常规选择器

$(‘input [name=’b2’]’).val()表单选择器

:input 选取所有input textarea,select和button元素:text 选取所有单行框,即 type=text:password 选取所有密码框:radio 选取所有单选框:checkbox 选取所有复选框:submit :reset :image :button :file :hidden表单过滤器

:enable 选取所有可用元素:disable 选取所有不可用元素:checked 选取所有被选中的元素,单选和复选字段:selected 选取所有被选中的元素，下拉列表 事件
click dbclick mousedown mouseupmousemove mouseover mouseout change select submit keydownkeypress keyup blur focus loadresize scroll error
绑定事件
bind(type,[data],fn)
bind(‘type1 type2’,fn)
bind({
‘type1’:function(){},
’type2’:function(){}
})
删除绑定事件
unbind() 删除全部事件
unbind(‘type1’) 删除type1事件，如果有多个事件
unbind(‘type1’,fn) 删除事件type1绑定的函数fn
简写事件绑定方法
click(fn) dblclick(fn) mousedown()mouseup() mouseover() mouseout() mousemove()mouseenter() mouseleave() keydown() keyup() keypress() unload() resize() scroll() focus() blur() focusin() focusout() select() (文本选定) change() (值改变) submit()
mouseover() mouseenter() 如果有子元素，over 也会触发事件，enter不会
mouseout() mouseleaver() 同上
keydown() keyup() 返回的是键码keyCode，keypress()返回的是字符编码charCode
focus() blur() 事件触发时机是当前元素
focusin() focusout() 事件触发时机可以是子元素
复合事件
ready(fn) 当DOM加载完毕触发
hover([fn1,]fn2) 鼠标移入称出的复合事件 mouserenter() mouseleave()

事件对象
对象的属性
type 事件类型
target 返回触发绑定事件的DOM元素
currentTarget 返回监听绑定事件的DOM，相当于this
如果事件绑定在父元素上，currentTarget是返回父元素，而target有可能返回子元素
relatedTarget 返回移入移出目标点离开或进入的那个DOM元素
data 返回绑定事件的额外数据
pageX/pageY 相对于页面原点
screenX/screenY 相对于显示器屏幕位置
clientX/clientY 相对于页面视口
result
timestamp
which 如果是鼠标点击，返回鼠标的左中右键(1,2,3),如果是键盘，返回键盘按键
altKey/shiftKey/ctrlKey/metaKey 获取是否按下了alt shift ctrl meta键

冒泡和默认行为
阻止冒泡，在函数里加上e.stopPropagation();
阻止默认行为 e.preventDefault();
$('form').submit(function(e){e.preventDefault():}) 阻止表单提交
如果同时阻止冒泡和默认行为，只需要函数返回false就行
$('a').click(function(e){return false;})

动画效果
显示 show() 隐藏 hide()
show(1000) 1000毫秒 1秒内慢慢变小变透明直到消失
还有show(‘slow’|’normal’|’fast’) 600毫秒 400毫秒 200毫秒
还可以加入函数做参数
show(‘slow’,function(){}) 实现列队动画效果，逐个显示，例：
<style>
.test{
padding:5px;
margin-right:5px;
background:orange;
float:left;
}
</style>
<div>人</div>
<div>生</div>
<div>苦</div>
<div>短</div>
<div>，</div>
<div>快</div>
<div>学</div>
<div>PYTHON</div>
<input type="button" value = "显示"/>
<input type="button" value = "隐藏"/>

$((function){
$('.show').click(function(){
$('.test').first().show('fast',function testshow(){
$(this).next().show('fast',testshow);
});
});

$('.hide').click(function(){
$('.test').last().hide('fast',function testshow(){
$(this).prev().hide('fast',testshow);
});
});
})
如果只用一个按钮来控制显示和隐藏，使用 toggle()
<p id="toggle-test">PYTHON</p>
<input type="button" value = "切换"/>

$('.toggle').click(function(){
$('#toggle-test').toggle('slow')
})
滑动、卷动
slideUp() slideDown() slideToggle()
淡入、淡出
fadeIn() fadeOut() fadeToggle()