jquery笔记

jquery笔记

1.核心函数
2.选择器
3.筛选
4.文档处理
5.属性
6.css
7.事件
8.效果
9.ajax
10.工具

为解决多框架冲突
1.$()
2.jQuery()

js加载时机
当页面加载完毕时 所有元素加载完毕（包括图片） windows.onload
当DOM元素加载完毕时--到</html>
$(function(){});

jquery对象访问：
each()// $("h1").each(function(i)
{
if(i%2==0)
{
$(this).css("background","#ccc");
}
})

$("h1:even").css("background","#ccc");
size() //个数 $("h1").size();
get() //
get(index)
index() //索引数 $("h1").click(function(){
alert($(this).index("h1"));
})

js元素对象和jquery对象的转换 get()
1.js => jquery
var obj = document.getElementById("h3id");
$(obj).css("color","blue");//前面不加双引号，js元素对象不加双引号
2. jquery => js
$("#h3id").get(0).outerHTML|tagName;//jquery没有outerHTML 只有js有这个属性

date()在标签上藏东西//也可以藏json
$("h1").each(function(i){
$(this).data("idx",i);
})
alert($("h1").date("idx"));

$(this).date("idx",{"name":"user1"});
alert($("h1").date("idx").name);

jquery选择器
#id $("#id")
element $("div")
.class $(".myclass")
* $("*")
组合选择器 $("div,span,p.myclass");

层级：
空格 div里面的所有的h1 $("#mydiv h1")
> 子元素 div里面的h1子元素 $("#mydiv>h1")
+ div后面紧挨着的div $("#mydiv+h1")
~ div后面所有的div平级元素 $("#mydiv~h1")

:first $("#mydiv>h1:first")
:last
:eq(1)//第二个
:even
:odd
:not(:first) //除了第一个h1
:gt(0) 大于0
:lt(4) 小于4

$("div:contains('john')") //所有div里面包含john的
:empty（h1） 空的标签h1
:has $("div:has(p)")//里面有p标签的div
:parent 查找所有含有子元素或者文本的td元素 $("td:parent")
多看手册

可见性：
:hidden $("h1:hidden").show() 把所有display：none的h1显示出来
:visibal

属性：
[] $("div[id]")//div里有id属性的
[=] $("div[id=‘1’]")//div里id为1
[!=] 不等于
[id^='us']//以us开头的id
[id$='us']//以us结尾的id
[name*='s']//包含s的name
$("input[id=3][name='user1']");//多个属性

表单
:input //找到所有input textarea select button
:text //匹配所有 type=text的人
:button //type=button
:password //type=password
:checkbox

:checked//找到被选中的
:disabled//找到所有被禁掉的input

attr("checked",1)//改属性

//全选
$("#allid").click(function(){
$("#formid>:checkbox").attr("checked",1);
})
//全不选
$("#notid").click(function(){
$("#formid>:checkbox").attr("checked",0);
})
//反选
$("#fanid").click(function(){
$("#formid>:checkbox").each(function(){
this.checked = !this.checked;
//或者 var c = $(this).attr("checked");
// $(this).attr("checked",!c);
})
})

筛选：
eq(index)
$("#s1>option").eq(2).attr("selected",1);//==$("#s1>option:eq(2)")

hasClass(class)//bool类型返回值
is(div)//bool返回值
filter() //$("p").filter(".select,:first") 过滤
map()
has() <===> :has
$("h1")[2] <===> $("h1").get(2);

float飘起来后 可以在最下面加个div class="nav" css: .nav{clear:both;} 这样就不用设置父div的高了

siblings() 所有兄弟

json ps

empty()
remove()//不保留原来的时间
detach()//保留原来的事件
removeAttr()
toggleClass() //有就删 没有就加

append
prepend
after
inner

广告卡：
<script>
$("li").mouseenter(function(){
$(this).css({"border-bottom":"1px solid #ccc"});
$(this).siblings().css({"border-bottom":" 5px solid #f00"});
var idx = $(this).index();
$("#div2").children("div").eq(idx).css({"display":"block"});
$("#div2").children("div").not(":eq("+idx+")").css({"display":"none"});
})
</script>

城市级联：
<script>
var str={
"bj":["房山","燕山","海淀","朝阳"],
"hlj":["肇东","哈尔滨","肖总"]
};
$("#s1").change(function(){
var tem = $(this).val();
var cs = str[tem];
$("#s2").empty();
$("#s2").append("<option>--city--</option>");
for(var i=0;i<cs.length;i++)
{
$("#s2").append("<option value="+cs[i]+">"+cs[i]+"</option>");
}
});
</script>

多查手册

bind //缺点：

//上传文件的样式 不同的浏览器inputfile样式不一样，所以应该把input用opacity隐藏了，然后再上面覆盖一个图片，最后上传按钮阻挡form默认行为并处罚input：file的click（）
<form>
<input type="file" style="opacity:0;positon:absolute;top:142px;left:10px;">
<img stc="a.png">
<button>上传</button>
</form>
//用change感知用户选完文件
<script>
$("input:file").change(function(){
alert(this.value);//弹出a.png
})
$("button").click(function(){
$("input:file").click();
return false;
})
</script>

//图片加载失败 自动加载a.png
$("img").error(function(){
$(this).attr("src":"a.png");
})

AJAX
$.get("index.php".{"id":2},function(data){
$("body").append(data);
})
$.post <===> $.get

div 居中 屏幕中间
#main{
500px;
height:300px;
background:#ccc;
border:2px solid #0f0;
margin:0 auto;
position:absolute;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-150px;
}

php arr => json json_encode

$.param(json) //json -> json_str

原声判断js array
alert(arr.constructor);

微博上传图片无刷新技术
index.html
<h1>微博无刷新上传图片</h1>
<form id="textformid" action="test.php" method="post">
<textarea name="textarename" id="textareaid" style="300px;height:100px"></textarea>
<br>
<input type="hidden" name="hname" id="hid">
<br>
<input type="submit">
</form>
<form action="index.php" method="post" enctype="multipart/form-data" target="win">
<input type="file" name="imageid" id="inputfile" >
</form>
<div id="showid">

</div>
<iframe name="win" id="winid"></iframe>
<script>
$("#inputfile").change(function(){
$(this).parent().submit();
})
</script>

index.php
<?php
$imgsrc = $_FILES['imageid']['tmp_name'];
$imgdst = $_FILES['imageid']['name'];
if(move_uploaded_file($imgsrc, $imgdst))
{
echo "OK";
echo "<script>top.document.getElementById('showid').innerHTML='<img src="{$imgdst}">';
top.document.getElementById('hid').value="{$imgdst}";
</script>";
}
else
{
echo "ERROR";
}
?>