Jquery

第一节：Jquery简介
http://www.jquery.com/
jQuery 是一个 JavaScript 函数库；
功能强悍；
jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器；

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
        
    //JS用法， 需在body 里加onload="init()"    
    /* function init(){
        document.getElementById("actionButton").onclick=function(){
            var content=document.getElementById("content").value;
            alert(content);
        }
    } */
    
    //Jquery 用法，和上面等效
    $(document).ready(function(){
        $("#actionButton").click(function(){
            alert($("#content").val());
        });
    });
</script>
</head>
<body >
<input type="text" id="content"/>&nbsp;&nbsp;<input type="button" id="actionButton" value="获取内容" />
</body>
</html>

View Code

第二章 Jquery选择器

第一节：Jquery选择器介绍
我们可以通过 Jquery选择器能从网页文档中找到我们需要的 DOM 节点；

第二节：基本选择器
第三节：属性选择器
第四节：其他选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 基本选择器
         $("#a1").css("background-color","red");  // 根据id
         $(".c1").css("background-color","red");  // 根据class类别
         $("a").css("background-color","red");  // 根据标签元素
        
        // 属性选择器
         $("[href]").css("background-color","red"); //所有带有 href 属性的元素
         $("[href='#']").css("background-color","red"); //所有 href 属性的值等于 "#" 的元素
         $("[href$='com']").css("background-color","red");//所有 href 属性的值包含以 "com" 结尾的元素
        
        // 其他选择器
         $("p.c1").css("background-color","red");//交集选择器
         $("ul li:first").css("background-color","red"); //层次选择 和 过滤选择器联合使用
        $("ul li:last").css("background-color","red");
    });
</script>
<style type="text/css">
    .c1{
        font-size: 40px;
    }
    
</style>
</head>
<body >
<p class="c1">Jquery选择器</p>
<ul>
    <li id="i1"><a id="a1" class="c1" href="http://www.java1234.com" >Java知识分享网</a></li>
    <li><a id="a2" class="c1" href="http://www.csdn.net">CSDN</a></li>
    <li><a href="http://www.iteye.com">iteye</a></li>
    <li><a href="http://www.cnblogs.com">博客园</a></li>
    <li><a class="c1" href="#">百度</a></li>
    <li><a href="http://www.google.com">谷歌</a></li>
</ul>
</body>
</html>

View Code

建议参考： http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

第三章 Jquery操作 DOM

第一节：Jquery操作 DOM节点
第二节：Jquery操作 DOM节点属性
第三节：Jquery操作 DOM节点样式
第四节：设置和获取HTML，文本和值
第五节：遍历节点操作
第六节：Jquery操作 DOM节点CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 操作DOM节点
        // 1，查找节点
         var li2=$("ul li:eq(1)");
        var li2_txt=li2.text();
        alert(li2_txt); 
        
        // 2，创建节点
         var li1=$("<li title='这是马化腾'>马化腾</li>");
        var li2=$("<li title='这是李彦宏'>李彦宏</li>");
        var li22=$("ul li:eq(1)");
        $("ul").append(li1);
        li2.insertAfter(li22); 
        
        // 3，删除节点
         $("ul li:eq(1)").remove();
        
        // 操作DOM属性
        // 获取属性
         var li2=$("ul li:eq(1)");
        var li2_attr=li2.attr("title");
        alert(li2_attr); 
        
        // 设置属性
         $("ul li:eq(1)").attr("title","你懂的");
        
        // 删除属性
         $("ul li:eq(1)").removeAttr("title");
        
        // 操作DOM节点样式
        // 获取样式
         var li2=$("ul li:eq(1)");
        var li2_class=li2.attr("class");
        alert(li2_class); 
        
        // 设置样式
         $("ul li:eq(1)").attr("class","lc2");
        
        // 追加样式
         $("ul li:eq(1)").addClass("lc3");
        
        // 移除样式
         $("ul li:eq(1)").removeClass("lc");
        
        // 设置和获取HTML，文本和值
        // 获取html
         var l1_html=$("ul li:eq(0)").html();
        alert(l1_html); 
        
        // 设置html
         $("ul li:eq(0)").html("<font color=red>哈哈</font>");
        
        // 获取文本
         var l1_text=$("ul li:eq(0)").text();
        alert(l1_text); 
        
        // 设置文本
         $("ul li:eq(0)").text("呵呵");
        
        // 遍历节点
        // children()
         var b=$("body").children();
        alert(b.length);
        var u=$("ul").children();
        alert(u.length);
        for(var i=0;i<u.length;i++){
            // alert(u[i].innerHTML); //这个U是原生的DOM节点
            alert($(u[i]).html());  //注意要用$()包装一下，否则不能使用jQuery方法。
        } 
        
        // next()
         var l=$("ul li:eq(1)").next();
        alert(l.html()); 
        
        // prev()
         var l=$("ul li:eq(1)").prev();
        alert(l.html()); 
        
        // CSS-DOM操作
        // 获取css样式
         var c=$("#jq").css("color");
        alert(c); 
        
        // 设置css样式
        $("#jq").css("color","blue");
    });
    
    function getUserName(){
        var userName=$("#userName").val();
        alert(userName);
    }
    
    function setUserName(){
        $("#userName").val("你懂的");
    }
</script>
</head>
<style type="text/css">
    .lc{
        background-color: red;
    }
    
    .lc2{
        background-color: blue;
    }
    
    .lc3{
        font-weight: bold;
    }
</style>
<body >
<p>你最喜欢的名人是？</p>
<ul>
    <li title="这是乔布斯"><font color="green">乔布斯</font></li>
    <li title="这是比尔盖茨" class="lc">比尔盖茨</li>
    <li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
<input type="text" id="userName"/>
<input type="button" value="获取数据" onclick="getUserName()"/>
<input type="button" value="设置数据" onclick="setUserName()"/>

<p id="jq" style="color: red">Jquery掉渣天</p>
</body>
</html>

View Code

jQuery 遍历 - each() 方法

输出每个 li 元素的文本：

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

jquery操作select(取值，设置选中）

比如<select class="selector"></select>

1、设置value为pxx的项选中

     $(".selector").val("pxx");

2、设置text为pxx的项选中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。

3、获取当前选中项的value

    $(".selector").val();

4、获取当前选中项的text

    $(".selector").find("option:selected").text();

    这里用到了冒号，掌握它的用法并举一反三也会让代码变得简洁。

 

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jQuery中是非常简单的。

如：$(".selector1").change(function(){

     // 先清空第二个

      $(".selector2").empty();

     // 实际的应用中，这里的option一般都是用循环生成多个了

      var option = $("<option>").val(1).text("pxx");

      $(".selector2").append(option);

});

View Code

jquery操作复选框(checkbox)的12个小技巧总结

1、获取单个checkbox选中项(三种写法)
$("input:checkbox:checked").val()
或者
$("input:[type='checkbox']:checked").val();
或者
$("input:[name='ck']:checked").val();

2、 获取多个checkbox选中项
$('input:checkbox').each(function() {
        if ($(this).attr('checked') ==true) {
                alert($(this).val());
        }
});

3、设置第一个checkbox 为选中值
$('input:checkbox:first').attr("checked",'checked');
或者
$('input:checkbox').eq(0).attr("checked",'true');

4、设置最后一个checkbox为选中值
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');

5、根据索引值设置任意一个checkbox为选中值
$('input:checkbox).eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');

6、选中多个checkbox同时选中第1个和第2个的checkbox
$('input:radio').slice(0,2).attr('checked','true');

7、根据Value值设置checkbox为选中值
$("input:checkbox[value='1']").attr('checked','true');

8、删除Value=1的checkbox
$("input:checkbox[value='1']").remove();

9、删除第几个checkbox
$("input:checkbox").eq(索引值).remove();索引值=0,1,2....
如删除第3个checkbox:
$("input:checkbox").eq(2).remove();

10、遍历checkbox
$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11、全部选中
$('input:checkbox').each(function() {
        $(this).attr('checked', true);
});

12、全部取消选择
$('input:checkbox').each(function () {
        $(this).attr('checked',false);
});

View Code

1.获取选中值，三种方法都可以：

$('input:radio:checked').val()；

$("input[type='radio']:checked").val();

$("input[name='rd']:checked").val();

2.设置第一个Radio为选中值：

    $('input:radio:first').attr('checked', 'checked');

或者

$('input:radio:first').attr('checked', 'true');

注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)

3.设置最后一个Radio为选中值：

$('input:radio:last').attr('checked', 'checked');

或者

$('input:radio:last').attr('checked', 'true');

4.根据索引值设置任意一个radio为选中值：

$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....

或者

5.根据Value值设置Radio为选中值

$("input:radio[value='rd2']").attr('checked','true');

View Code

第四章 Jquery事件操作

第一节：文档加载事件
第二节：DOM单击、双击事件
第三节：DOM获得焦点、失去焦点事件
第四节：DOM鼠标移入，移出事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // alert("文档加载完毕");
        
        $("#zs").click(function(){
            $("#p1").html("<font color=red>张三被点了</font>");
        });
        
        $("#zs").dblclick(function(){
            $("#p1").html("<font color=red>张三被双击了</font>");
        });
        
        $("#t1").focus(function(){
            $("#t1").val("获取焦点");
        });
        
        $("#t1").blur(function(){
            $("#t1").val("失去焦点");
        });
        
        $("#d1").mouseover(function(){
            $("#d1").html("鼠标移入");
        });
        
        $("#d1").mouseout(function(){
            $("#d1").html("鼠标移出");
        });
    });
</script>
</head>
<body>
<input type="button" id="zs" value="张三"/>
<p id="p1"></p>
<input type="text" id="t1"/>
<hr/>
<div id="d1" style="border: 1px solid red;width: 100px;height: 100px;"></div>
</body>
</html>

View Code

第五章 Jquery动画效果

第一节：Jquery隐藏与显示DOM
第二节：Jquery淡入和淡出DOM
第三节：Jquery滑动 DOM
第四节：Jquery动画
第五节：Jquery callBack回调方法
第六节：Jquery暂停动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#b1").click(function(){
            $("#p1").show();
        });
        
        $("#b2").click(function(){
            $("#p1").hide();
        });
        
        $("#b3").click(function(){
            $("#d1").fadeOut();
        });
        
        $("#b4").click(function(){
            $("#d1").fadeIn();
        });
        
        $("#b5").click(function(){
            // $("#d1").fadeToggle();
            // $("#d1").fadeToggle("slow");
            $("#d1").fadeToggle(10000);
        });
        
        $("#b6").click(function(){
            $("#d1").fadeTo("slow",0.1);
            $("#d2").fadeTo("slow",0.5);
            $("#d3").fadeTo("slow",0.9);
        });
        
        $("#b7").click(function(){
            $("#d4").slideDown("slow");
        });
        
        $("#b8").click(function(){
            $("#d4").slideUp("slow");
        });
        
        $("#b9").click(function(){
            $("#d5").animate({left:'500px'},'slow');
        });
        
        $("#b10").click(function(){
            $("#d5").animate({
                left:'500px',
                opacity:0.5,
                height:'150px',  //改变尺寸到150px
                width:'150px'
                },'slow');
        });
        
        $("#b11").click(function(){
            $("#d5").animate({
                left:'500px',   //改变位置
                opacity:0.5,   //改变透明度
                height:'+=150px',  //增加150px
                width:'+=150px'
                },'slow');
        });
        
        $("#b12").click(function(){
            $("#p2").show(function(){  //回调方法
                alert("小日本出来了！");
            });
        });
        
        $("#b13").click(function(){
            $("#d6").animate({left:'500px'},'slow');
        });
        
        $("#b14").click(function(){
            $("#d6").stop();
        });
    });
</script>
</head>
<body>
<input type="button" value="出来" id="b1"/>
<input type="button" value="滚" id="b2"/>
<p id="p1">小日本</p>
<hr/>
<input type="button" value="淡出" id="b3"/>
<input type="button" value="淡入" id="b4"/>
<input type="button" value="淡入淡出开关" id="b5"/>
<input type="button" value="透明度" id="b6"/>
<div id="d1" style="width: 100px;height: 100px;background-color: red;margin: 10px;"></div>
<div id="d2" style="width: 100px;height: 100px;background-color: green;margin: 10px;"></div>
<div id="d3" style="width: 100px;height: 100px;background-color: blue;margin: 10px;"></div>
<hr/>
<input type="button" value="向下滑动" id="b7"/>
<input type="button" value="向上滑动" id="b8"/>
<div id="d4" style="background-color: gray;display: none;height: 100px;width: 500px;">
    <p>Jav1234</p>
    <p>Java1234掉渣天！</p>
</div>
<hr/>
<input type="button" value="向左移动" id="b9"/>
<input type="button" value="动画效果2" id="b10"/>
<input type="button" value="动画效果3" id="b11"/>
 <!--  做移动效果时，注意div定位方式不能用普通的。 -->
<!-- <div id="d5" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div> -->
<hr/>
<input type="button" value="回调事件" id="b12"/>
<p id="p2" style="display: none;">小日本</p>
<hr/>
<input type="button" value="向左移动" id="b13"/>
<input type="button" value="停止" id="b14"/>
<div id="d6" style="width: 100px;height: 100px;background-color: red;margin: 10px;position: absolute;"></div>
</body>
</html>

View Code

第六章 Jquery Ajax

第一节：Jquery Ajax简介
Jquery对 Ajax 操作封装了一套跨浏览器，方便用户使用的 Api；

第二节：Jquery Ajax Load方法
远程请求，把请求的数据载入到 DOM 里；
load( url , [,data] , [,callback])
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法

第三节：jquery Ajax Get/Post方法
Ajax 请求后台；
$.post(URL,data,callback); (常用)
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#b1").click(function(){
            $("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
                alert("执行完成");
            });
        });
        
        $("#b2").click(function(){
            $.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
                alert("请求状态："+textStatus);//success
                alert("返回数据："+data);
                data=eval("("+data+")");
                $("#name").val(data.name);
                $("#age").val(data.age);
            });
        });
    });
</script>
</head>
<body>
<input id="b1" type="button" value="Load加载"/>
<div id="d1"></div>
<hr/>
<input id="b2" type="button" value="Post/Get加载"/><br/>
姓名：<input type="text" id="name"/><br/>
年龄：<input type="text" id="age"/>

</body>
</html>

View Code

补充：

$("a").get(1)与$("a").eq(1)的区别是什么？

eq返回的是一个jquery对象 get返回的是一个html 对象数组
返回的是jQuery对象，就可以继续调用其他方法，返回的是html数组就不能调用jQuery的其他方法
例如：
$("ul li").get(1).css("color", "red"); //这个是错误的
$("ul li").eq(1).css("color", "red"); //这个是正确的

posted @ 2017-03-12 21:49 SKYisLimit 阅读(143) 评论(0) 收藏举报

刷新页面返回顶部

SKYisLimit

Jquery

jQuery 遍历 - each() 方法

jquery操作select(取值，设置选中）

公告