jquery基础00

为什么80%的码农都做不了架构师？>>>   

1.jquery的好处
<script type="text/javascript">
/* $(document).ready(function(){
    alert("hello jquery");
}); */
//经常使用下面的方式来替代上面的操作 
$(function(){
    alert("hello jquery2!");
});
</script>

2.jquery选择器
<script type="text/javascript">
$(function(){
    //jquery的选择器与css一样
    /* $("li.abc").css("color","#f00"); */
    //$("#hello ul li:even").css("background","#00f").css("color","#fff");
    //even----代表选择奇数行进行操作 
    $("li").mouseover(setColor).mouseout(setColor);
    function setColor(){
        $(this).toggleClass("bg");
        //检查是否有class为bg,有就删除,没有设置为bg
    }
});
</script>
3.jquery加载
<script type="text/javascript">
/* window.onload=function(){
    alert("abc");
} */
/*第二个方法会将第一个覆盖*/
/* window.onload=function(){
    alert("abc2");
} */

/*jquery对加载事件做了特殊的处理,使得两个方法都会被加载*/
$(function(){
    alert("jquery");
});
$(function(){
    alert("jquery 2");
});
</script>
4.jquery对象与js对象转换
<script type="text/javascript">
$(function(){
//目前hello是一个javascript对象,对于该对象而言,无法使用jquery的方法
    var hello=document.getElementById("hello");
    //hello.css("color","#f00");
    //使用$(xx)就可以把xx这个节点封装为jquery的节点 
    $(hello).css("color","#f00");
    /*每一个jquery节点都是一个数组,只要取出数组中的值,这个值就是js的节点 
    就只能用js的方法,当转换为js节点之后就无法使用jquery的方法了,如果
    要使用jquery的方法,再通过$()进行封装 */
    ($("li.abc")[0]).innerHTML="abcdeg";
    var lis=$("#hello ul li");
    for(var i=0;i<lis.length;i++){
        //目前li是js的节点 
        var li=lis[i];
        //li.innerHTML=i+"["+(i+1)+"]"+li.innerHTML;
        /*$(li)就变成了jquery节点,xx.html("abc"):把节点内容完成转换 */
        $(li).html((i+1)+"."+$(li).html());
    }
});
</script>
5选择器实例
<script type="text/javascript">
$(function(){
    //取li中的所有a
    //$("li a").css("color","#f00");
    //取class为.myList这个标签的下一级标签li的下一级标签为a的标签 
    //$(".myList>li>a").css("color","#f00");
    //取li中li的href属性以http开头的节点 
    //$("a[href^='http://']").css("background","#00f")
        //.css("color","#fff");
    //取muList中ul下包含a标签的li标签 
    //$(".myList ul li:has('a')").css("background","#ff0");
    //获取页面中所有href以pdf结尾的a标签 
    //$("a[href$='pdf']").css("background","#ff0").css("color","#f00");
    //取id为li1的下一个兄弟节点(li),仅仅只会取一个相邻节点,如果不是li,则无返回 
    //$("#li1+li").css("background","#ff0");
    //取id为li1的所有满足条件兄弟节点(li,其他标签不行)
    //$("#li1~li").css("background","#ff0");
    //取有title的a标签
    //$("a[title]").css("color","#ff0");
    //页面中最先匹配的某个元素 
    //alert($("li:first").html());
    //页面中最后匹配的某个元素 
    //alert($("li:last").html());
    //获取满足要求的第一个li
    //$(".myList > li li:first-child").css("background","#f00").css("color","#fff");
    //获取没有兄弟节点的节点 
    //alert($("ul:only-child").length);
});
</script>
<script type="text/javascript">
$(function(){
    //找tbody中的第二个tr节点 
    //$("tbody tr:nth-child(2)").css("color","#f00");
    //所有tr中的偶数节点 
    //$("tbody tr:nth-child(even)").css("background","#999");
    //$("tbody tr:even").css("background","#aaa");
    //$("tbody tr:gt(2)").css("background","#aaa");
    //文本包含张三的td标签 
    $("td:contains('张三')").css("background","#aaa");
});
</script>

转载于:https://my.oschina.net/686991/blog/363643