JQuery 个人学习笔记

　　把自己学习JQuery 的过程记录下来。

　

JQuery 选择器学习记录　　　　　　　　

<style type="text/css">
.warning{background-color:Green;color:Red;}
</style>
<script type="text/javascript">
/* jq选择器表达式中的空格不能乱加乱删
       //$("#id") id选择器


    //$（"tagname"） tagname 选择器
    $("p").click(function () { alert("我们都是P"); });//这个时候dom元素还没解析出来，所以$("p")取不到任何元素
    $(function () {
        $("p").click(function () { alert("我们都是P"); });//隐式迭代，给所有的选择出来的元素增加事件
       });*/
//jq 的迭代
    $(function () {
if ($("#bt").length <= 0) {
            alert("id，为bt的按钮未找到！");
return;
        }
    }
    );
//$(".classname") 样式的CSS选择器
    //    $(function () {
    //    $(".warning").click(function () { alert("这是css选择器"); });
    //    });

//$(p,div,span.classname) 多条件选择器，页面所有的 p,div ,以拥有classname样式的span 标签

/*
    $("div li") 获取div 下的所以li元素（后代，子，子的子）
    $("div>li")获取div 下的直接li子元素
    $(".classname +div") 获取样式名为classname 之后的第一个div元素
    $(".classname~ div")获取样式名为classname之后的所有的div元素
*/


</script>
<h2>j4</h2>
<input type="button"  value ="tagname" id="bt" />
<p>dfd</p>
<p>d</p>
<p>f</p>
<p>fs</p>
<p class ="warning">dfs</p>
<div class ="warning">警告信息</div>
<input type="button" class="warning" value ="警告" />

　next(),siblings()，选择器的学习记录。

<script type="text/javascript">
      $(function () {
     $("div").click(function () {
/* next()的遍历*/
var tem = $(this).next().text(); //显示被单击的div下一个同级的元素的text值
                        if (tem) {
                            alert("该后面下一个同级的元素的text值" + tem);
                        }
else {
                            alert("已经是最后一个div了，");
                        }
var temp = $(this).next("p").text(); //显示被单击的div下一个同级P的元素的text值
                        if (temp) {
                            alert("该后面下一个同级的p元素的text值：" + temp);
                        }
else {
                            alert("后面没有P元素");
                        }
var tempp = $(this).nextAll("p").text(); //显示被单击的div下一个同级P的元素的text值
                        if (tempp) {
                            alert("后面所有同级的p元素的text值：有" + tempp);
                        }
else {
                            alert("后面没有P元素");
                        }
var temppp = $(this).nextAll("div"); //显示被单击的div后面所有的div的背景颜色改成红色
                        if (temppp) {
                            $.each(temppp, function () {$(this).css("background","red") });
                        }
/*
            $(this).nextAll("div").css("background","red");
*/
           });
           });
/*
        siblings()，获取所有同辈的元素，没有上下之分
*/
                 $(function () {
                $("div").click(function () {
                $(this).css("background", "red").siblings("div").css("background", "white");//链式编程
                /*
                  $(this).css("background", "red");
                $(this).siblings("div").css("background", "white");
*/
                });
            });
</script>
<h2>j5</h2>
<div>第一个div</div>
<div>第二个div</div>
<div>第三个div</div>
<p>我是P1</p>
<div>第四个div</div>
<div>第5个div</div>
<p>我是P2</p>

<div>第6个div</div>
<p>我是P3</p>

<div>第7个div</div>

　　

JQuery 选择器学习记录部分。

View Code

<script type="text/javascript">
/*
  :first 选取第一个元素，$("div:first")选取第一个div
  :last 选取最后一个元素，$("div:last")选取最后一个div
  :not(选择器） 选取不满足“选择器”条件的元素 。$("div:not(#id)") 选取id不是id的div元素
  ：even ,:odd。选取索引是奇数或者偶数的元素，$("input:even")选择索引是奇数的input
  :eq(索引序号)---选取等于索引序号的元素, :gt(索引序号)---选取大于索引序号的元素，:lt(索引序号)---选取小于索引序号的元素。如$("input:gt(0)")选取索引大于0
  $(":header")选取所有h1...h6的元素。
  $("div:animated")选取正在执行动画的<div>元素
*/

    $(function () {
        $("#tb1 tr:first").css("font-size", "40");//解释不出。。。。。
        $("#tb1 tr:last").css("color", "yellow");
        $("#tb1 tr:gt(0):lt(3)").css("font-size", "28").css("color", "red");//gt(0):lt(3)是相对gt的结果在进行lt 
        $("#tb1 tr:even").css("background", "blue");
        $("#tb1 tr:odd").css("background", "green");
    });
</script>
<h2>j6</h2>
<table id="tb1">
<tr><td>姓名</td><td>成绩</td></tr>
<tr><td>tt</td><td>100</td></tr>
<tr><td>td</td><td>98</td></tr>
<tr><td>ttm</td><td>99</td></tr>
<tr><td>tom</td><td>97</td></tr>
<tr><td>ter</td><td>96</td></tr>
<tr><td>tere</td><td>99</td></tr>
<tr><td>平均分</td><td>98</td></tr>
</table>

　　

JQuery 过滤器

View Code

<script type="text/javascript">
/* 属性过滤选择器
    $("div[id]") 选取有ID属性的div
    $("div[title=test]") 选取title属性为test 的div
    $("div[title!=test]")选取title属性不为test 的div
    $("div[title^=ab]")选取title属性以ab开始的DIV
    $("div[title$=cd]")选取title属性以cd结束的DIV
    $("div[title*=b]")选取title属性含有b的DIV
    $("div[id][title=a]")选取DIV中拥有ID属性，并且title属性等于a的
*/
/*表单对象选择器
    $("#form1:enabled")选取id为form1的表单内所有启用的元素
    $("#form1:diabled")选取id为form1的表单内所有禁用的元素
    $("input:checked") 选取所有选中的元素（radio,checkBox）
    $("select:selected") 选取所有选中的选项元素（下拉列表）
    $(":input")选取所有<input> <textarea> <select> <button> 元素，他和$("input")不一样
    $(":text")选取所有单行文本框
    $(":password") 选取所有的密码框,同理还有，：radio,:checkbox,:submit,:image,:reset,:button.:file .:hidden
    $
*/

    $(function () {
        $("input[type=checkbox]").click(
function () {
var ck = $("input[type=checkbox]:checked");
var ar = new Array();
            ck.each(function (key, va) { ar[key] = $(va).val(); });
            $("#t").text("共有：" + ck.length + "条：" + ar.join(","));
        });
    });
</script>

<h2>j7</h2>

<input type="checkbox" value="小学生" />小学生    <br />
<input type="checkbox" value="中学生" />中学生    <br />
<input type="checkbox" value="中专生" />中专生    <br />
<input type="checkbox" value="高中生" />高中生    <br />
<input type="checkbox" value="大专生" />大专生    <br />
<p id="t"></p>

　　

以上仅是个人笔记，

转载于:https://www.cnblogs.com/fxam/archive/2011/08/13/fxam_JQuery.html