基本选择器
#id
.className
div
,:和的意思
*:拿所有的节点
层次选择器,后代选择器
空格:表示后代的意思
>:表示儿子
+:表示下一个兄弟
~:表示下面的所有兄弟
数量过滤选择器
:eq(?)---找第?个节点
:lt(?)---找位置小于?的节点,如,:lt(2)的意思就是找位置小于2的节点
:gt(?)---找位置大于?的节点,如,:gt(2)的意思就是找位置大于2的节点
:first---找第一个
:last----找最后一个
:odd-----找奇数个,以”下标“为标准
:even----找偶数个,以”下标“为标准
排除选择器
:not(???)---排除掉???的,只拿剩下的,如:not(div),排除了div,剩下的拿出来
属性选择器
[???]---意思就是找包含属性???的节点,如[id]就是找包含属性id的节点
[class=abc]---意思就是找属性class等于abc的节点
[class^=a]----?
[class$=a]----?
[class!=a]----?
[][][][]------?
可见选择器
:visible----选择所有可见的标签节点
:hidden-----选择所有不可见的标签节点
其它选择器
:checked----选择所有选中的
:not(:checked)---没选中的
方法讲解前的一些基础知识
1.dom类型结点
document.getElementById("id");--一个dom节点对象
document.getElementsByName("name")--一组的dom节点对象
document.getElementsByTagName("tagName")--一组
document.getElementsByClass("className")--一组
2.JQuery类型结点
$("选择器")---jquery类型节点,它可以表示一个节点,也可以表示一组节点
3.dom->jquery----->$(dom)
4.jquery-->dom--->jquery[0]
5.循环
jquery方法
针对节点
1.增,删除
2.查询
3.属性操作
4.样式操作
5.针对节点文本的操作
6.事件绑定的方法
7.关于ajax的方法
8.关于动画的方法
1.增,删除
增:老爸.append(儿子); 老爸.prepend(儿子),兄弟.after(新兄弟),兄弟.before(新兄弟);
儿子.appendTo(老爸);儿子.prependTo(老爸),新兄弟.insertAfter(兄弟),新兄弟.insertBefore(兄弟)
xxx.wrap(xx),xxx.wrapAll(xx),xxx.wrapInner(xx)
删:remove
2.查询
查询:find("选择器")查后代,next()下一个,prev()上一个,siblings(),//closest("*"),nextAll(),prevAll(),parent()
3属性操作
通用方法:attr("属性名","属性值")改属性---attr("属性名")读属性
:removeAttr("属性名")
专用方法:val():专读写value属性的值
:css():专改style属性
:height():专改style属性中的height,也可读
:width():
:offset() 了解(相对定位找位置)
:position() 了解(绝对定位找位置)
:scrollTop()拿滚动了多高
:scrollLeft()拿滚动的横向距离
:广告题:1.写html,其中一大层(撑大网页),一小层(广告)
2.写css.其中大层宽高很厉害,小层绝对定位
3.写javascript.在窗体加载时,记录层的初始位置
4.写javascript.在窗体滚动时,改变层的位置=初始高度+滚动高度
:addClass("a")增加一个类<input class="a" />
:removeClass("a")<input />,removeClass()删除所有类
4.样式操作
:hasClass():判断是否有某类
5.针对节点文本的操作
:html()读文本,写文本都可以
6.事件绑定的方法
:事件名去掉on(方法)
:bind("事件名",方法)
:unbind("事件名")解除事件绑定
:建议:还要看看书里面关于事件的讲解
7.循环
1.第一种循环方式
for(var i=0;i<$("li").length;i++){
//$("li")[i].innerHTML="我被改了"+i;
$("li:eq("+i+")").html("我被改了"+i);
}
2.第二种循环方式
$("li").each(function(i,o){
//alert(o.innerHTML);
alert($(o).html());
});
8.特殊点的方法:is("")---判断是否符合条件
9.学习动画方法
hide();隐藏
show();显示
toggle();自动判断隐藏还是显示
slideUp();往上隐藏
slideDown();往下显示
slideToggle(1000);自动判断往上隐藏还是往下显示
fadeIn();淡入显示
fadeOut();淡出隐藏
fadeToggle(2000);
animate:
$('#id').css({"text-align":"left","color":"red"})
10.关于ajax的方法