jQuery初步

Posted 2020-07-30 十三弦

1.jQuery开发步骤

 　　jQuery是第三方开源组织基于js写的一款跨主流浏览器的实用库。

　　（1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>

　　（2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....

2.js对象转成jQuery对象

　　语法：$(js对象)---->jQuery对象

　　例如：$(divElement)---->$div

3.jQuery对象的三种基本定位方式

　　（A）通过ID属性：$("#id属性值")

　　（B）通过标签名：$("标签名")

　　（C）通过CLASS属性：$(".样式名")

4.jQuery9类选择器

基本选择器

//查找id的元素个数
alert($("#div1ID").size());
//查找div元素个数
alert($("div").length);
//查找class元素个数
alert($(".myClass").size());
//查找div，span，p的个数
alert($("div,span,p").size());
//查找所有id，class，p的元素个数
alert($("#div1ID,.myClass,p").size());

层次选择器

//找到form里面的input
alert($("form input").size());
//找到form里所有子级input元素
alert($("form>input").size());
找到form同级的第一个input的值
//alert($("form+input").val());
alert($("form+input").size());
//找到form同级的input元素个数，从form往后找
alert($("form~input").length);

基本加强型选择器

//得到第一个li
alert($("ul li:first").text());
//得到最后一个li
alert($("ul li:last").text());
//得到第3个li，从0开始计数
alert($("ul li:eq(2)").text());
//得到偶数的tr
alert($("table tr:even").text());
//得到奇数的tr
alert($("table tr:odd").text());
//查找表格中索引号大于0的tr
alert($("table tr:gt(0)").size());
//查找表格中索引号小于4的tr
alert($("table tr:lt(4)").size());
//给h1\h2\h3标签加上红色背景，蓝色文字，header只用于h1、h2、h3
$(":header").css("background-color","red").css("color","blue");
//查找未选中的input为checkbox的元素个数
alert($(":checkbox:not(:checked)").size());

内容选择器

//查找所有包含文本"John"的div元素的个数
alert($("div:contains(‘John‘)").size());
//查找所有p元素为空的元素个数，不包含<p/>元素
alert($("p:empty").size());
//给所有包含p元素的div元素添加一个myClass样式
$("div:has(p)").addClass("myClass");
//查找所有含有子元素或者文本的p元素个数,即p为父元素，包含<p/>元素
alert($("p:parent").size());

可见性选择器

//1)查找隐藏的tr元素的个数
alert($("table tr:hidden").size());
//2)查找所有可见的tr元素的个数
alert($("table tr:visible").size());

属性选择器

//查找所有含有id属性的div元素个数
alert($("div[id]").size());
//查找所有name属性是newsletter的input元素，并将其选中
$("input[name=‘newsletter‘]").attr("checked","checked");
//查找所有name属性不是newsletter的input元素，并将其选中
$("input[name!=‘newsletter‘]").attr("checked","checked");
//查找所有name属性以‘news‘开头的input元素，并将其选中
$("input[name^=‘news‘]").attr("checked","checked");
//查找所有name属性以‘letter‘结尾的input元素，并将其选中
$("input[name$=‘letter‘]").attr("checked","checked");
//查找所有name属性包含‘news‘的input元素，并将其选中
$("input[name*=‘news‘]").attr("checked","checked");
//找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
$("input[id][name$=‘letter‘]").attr("checked","checked");

子元素选择器

//迭代[each]每个ul中第1个li元素中的内容,索引从1开始
$("ul li:first-child").each(function () {
    //alert(this.text());传统js对象不能调用text
    alert($(this).text());
})
//迭代每个ul中最后1个li元素中的内容,索引从1开始
$("ul li:last-child").each(function () {
    //alert(this.text());传统对象不能调用text
    alert($(this).text());
})
//迭代每个ul中第2个li元素中的内容,索引从1开始
$("ul li:nth-child(2)").each(function () {
    alert($(this).text());
})
//在ul中查找是唯一子元素的li元素的内容
$("ul li:only-child").each(function () {
    alert($(this).text());
})

表单选择器

//查找所有input元素的个数
//alert( $("input").size() );//10，找input标签
alert( $(":input").size() );//13，找input标签和select/textarea/button
//查找所有文本框的个数
alert( $(":text").size() );
//查找所有密码框的个数
alert( $(":password").size() );
//查找所有单选按钮的个数
alert( $(":radio").size() );
//查找所有复选框的个数
alert( $(":checkbox").size() );
//查找所有提交按钮的个数，包括<button>标签
alert( $(":submit").size() );
//匹配所有图像域的个数
alert( $(":image").size() );
//查找所有重置按钮的个数
alert( $(":reset").size() );
//查找所有普通按钮的个数，包括input的type=button
alert( $(":button").size() );
//查找所有文件域的个数
alert( $(":file").size() );
//查找所有input元素为隐藏域的个数
alert( $(":input:hidden").size() );

表单对象属性选择器

//查找所有可用的input元素的个数
alert($("input:enabled").size());
//查找所有不可用的input元素的个数
alert( $("input:disabled").size() );
//查找所有选中的复选框元素的个数
alert( $(":checkbox:checked").size() );
//查找所有未选中的复选框元素的个数
alert( $(":checkbox:NOT(:checked)").size() );
//查找所有选中的选项元素的个数
alert( $("select option:selected").size() );
//查找id为provinceID的select的未选中的选项个数
alert( $("#provinceID option:NOT(:selected)").size() );

5.jQuery方法

DOM标准规则下的jQuery常用API

//DIV标签插入到UL标签之后(父子关系)
$("ul").append($("div"));
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend($("div"));
//DIV标签插入到UL标签之后(兄弟关系)
$("ul").after($("div"));
//DIV标签插入到UL标签之前(兄弟关系)
$("ul").before($("div"));

//取得form里第一个input元素的type属性
//<input type="text" name="username" value="张三"/>
alert($("form input:first").attr("type"));
//设置form里最后一个input元素的为只读文本框
$("form input:last").attr("readonly","true");

//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
/*js方式*/
 var divElement = document.createElement("div");
 divElement.innerHTML = "哈哈哈";
 divElement.setAttribute("id","2015");
 divElement.id = "2015";
 document.body.appendChild(divElement);
//jquery方式
var $div = $("<div id=‘2015‘>哈哈哈哈</div>")
$("body").append($div)
$(document.body).append($div);

//删除ID为secondID的LI元素
$("#secondID").remove();
//删除第一个ul中的所有LI元素
$("#a li").remove();
//删除第二个UL元素
$("#b").remove();

//复制原input元素，添加到原input元素后，与其同级
var $old = $(":button");
var $new = $old.clone();
$new.val("新按钮");
$old.after($new);
//为原input元素动态添加单击事件，且复制原input元素，
var $old = $(":button");
$old.click(function (){
    alert("动态事件");
})
//添加到原input元素后，与其同级，且和原按钮有一样的行为
var $old = $(":button");
var $new = $old.clone(true);//复制行为和样式
$new.val("新按钮");
$old.after($new);

//双击<div>中的文本，用文本框替换文本
$("div").dblclick( function(){
    var $text = $("<input type=‘text‘ style=‘width:165px;height:23px‘/>");
    //文本框替代div标签
    $(this).replaceWith( $text );
} );

//为<table>元素添加属性border/align/width
$("table").attr("border","2").attr("align","right").attr("width","60%");
//将<table>元素的align属性删除
$("table").removeAttr("align");

添加样式

//为无样式的DIV添加样式
$("div:first").addClass("myClass");
//为有样式的DIV删除样式
$("div:last").removeClass("myClass");
//切换样式，即有样式的变成无样式，无样式的变成有样式
$("div").toggleClass("myClass");
//最后一个DIV是否有样式
var flag = $("div:last").hasClass("myClass");
alert(flag?"有样式":"无样式");

//获取图片的坐标
var offset = $("img").offset();
var x = offset.left;
var y = offset.top;
alert(x);
alert(y);
//设置图片的坐标
$("img").offset({
    top:100,
    left:200
});
//获取图片的宽高
var w = $("img").width();
var h = $("img").height();
alert(w+":"+h);
//设置图片的宽高
$("img").width(500);
$("img").height(600);

//取得div元素的直接子元素内容，不含后代元素
//<div>
//    <span>
//        Hello Again
//        <b>
//            Bold
//        </b>
//    </span>
//</div>
alert($("div").children().text());//Hello Again Bold
//取得div元素的下一个同级的兄弟元素内容
alert($("div").next().text());
//取得div元素的上一个同级的兄弟元素内容
alert($("div").prev().text());
//依次取得div元素同级的所有兄弟中p元素的内容
$("div").siblings("p").each(function(){
    alert($(this).text());
});

动画

//图片隐蔽
$("img").hide(5000,function(){
    alert("隐藏完毕");
});
//休息3秒
window.setTimeout(function(){
    $("img").show(5000);
},3000);

//淡出隐蔽图片
$("img").fadeOut(3000);
//淡入显示图片
$("img").fadeIn(3000);

$(":button").click(function(){
    //div标标上下移动
    $("div").slideToggle(100);
});

6.jQuery事件

        /*使用JS方式加载a()和b()二个方法，后面的覆盖前面的*/
        window.onload = function(){
            a();
        }
        window.onload = function(){
            b();
        }
        /*使用jQuery最简方式加载a()和b()二个方法，不会覆盖两个都会执行*/
        $(function(){
            a();
        });
        $(function(){
            b();
        });
        //当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
        $("#city").change( function(){ 
            var $option = $("#city option:selected");
            var value = $option.val();
            var text = $option.text();
            alert(value+":"+text);
        } );
        //加载页面时获取光标并选中所有文字
                $(function(){
                    //定位光标
                    $(":text").focus();
                    //选中字体
                    $(":text").select();
                })    
        //当按键弹起时，显示所按键的unicode码
        $(function(){
        //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象
            $(document).keyup(function(){
            //获取按钮的unicode编码
            var code = event.keyCode; 
            alert(code);
            });
        });
        //显示鼠标移动时的X和Y座标
        $(function(){
            $(document).mousemove(function(){
                var x = event.clientX;
                var y = event.clientY;
                $("#xID").val(x);
                $("#yID").val(y);
            });        
        });
        //鼠标移到某行上，某行背景变色
        $("table tr").mouseover(function(){
            $(this).css("background-color","activecaption");
        });    
        
        //鼠标移出某行，某行还原
        $("table tr").mouseout(function(){
            $(this).css("background-color","white");
        });
        
        //鼠标移到某图片上，为图片加边框
        $("img").mouseover(function(){
            $(this).css("border-color","red");
        });
        
        //鼠标移出图片，图片还原
        $("img").mouseout(function(){
            $(this).css("border-color","white");
        });
    <script type="text/javascript">
        //浏览器加载web页面时触发
        $(function(){
            $("form :text").focus();
        })
    </script>

    <script type="text/javascript">
        //检测是否为中文，true表示是中文，false表示非中文
        function isChinese(str){
            var reg = /^[\u4E01-\uFA29]+$/i;
            if(reg.test(str))
            {
                return true;
            }
            return false;
        }
    </script>

    <script type="text/javascript">
        //当表单提交前检测
        $("form").submit(function(){
            var flag = false;
            //获取文本框中内容
            var inputText = $("form :text").val();
            //去空格
            inputText = $.trim(inputText);
            //判断是否有内容
            if(inputText.length >0){
                //如果有英文
                if(isChinese(inputText))
                {
                    flag = true;
                    $("form :text").val("");
                }
                else {
                    alert("用户名必须为中文")
                }
            }
            else {
                alert("必须填写用户名")
            }
            return flag;
        })
    </script>
        //浏览器加载页面时，文本框样式改变
        $(function(){
            $("table :text").addClass("myClass");
        });
        //光标移上去时，清空文本框内容
        $("table :text").focus(
                function(){
                    $(this).val("");
                    $(this).removeClass("myClass");
                }
        );
        //当文本框失去焦点时，恢复原来的样式
        $("table :text").blur(function(){
            var content = $(this).val();
            if($.trim(content).length == 0)
            {
                $(this).val("输入用户名");
                $(this).addClass("myClass");
            }
        })

7.jQuery中使用AJAX

简单获取时间，jquery对象调用load，直接将返回的数据插入到jquery对象里面。

function getMsg(){
    var url = "${pageContext.request.contextPath}/ajax_time?time="+new Date().getTime();
    // 参数一：url
    // 参数二：以post方式发送的JSON格式数据
    // 参数三：回调函数
    $("#timeSpan").load(url,null,function(backData,textStatus,ajax){
        //回调函数的三个参数
        //返回的数据，它是js对象，它是一个对象
        alert(backData);
        //返回状态的文本描述，例如success，error
        alert(textStatus);
        //ajax对象
        alert(ajax.responseText);//是一个字符串
    });
}

验证用户是否存在，使用$.post方法。

function checkEmp(input){
    var empName=$(input).val();
    //去掉空格
    empName = $.trim(empName);
    if(empName.length == 0)
    return;
    var url="${pageContext.request.contextPath}/emp_checkEmp?time="+new Date().getTime();
    //手动写json对象
    var sendData = {
        empName:empName
    };
    //jquery自动生成json对象
    //var sendData = $("form").serialize();
    alert(sendData);
    $.post(url,sendData, function (backData) {
        //创建img标签
        var $img = $("<img src=‘"+backData+"‘ height=‘14px‘ width=‘14px‘/>");
        //清空span，然后添加图片
        $("span").text("");
        $("span").append($img);
    })
}

二级联动：

function getCity(province){
    var index = province.selectedIndex;
    if(index == 0)
    return;
    var $province = $(province[index]).text();
    var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime();
    var sendData = {
        province:$province
    }
    $.post(url,sendData,function(xml){
        //清空city下拉菜单
        $("#cityID option:gt(0)").remove();
        //xml是js对象
        var $xml = $(xml).find("city");
        $xml.each(function(){
            //text可以访问xml标签
            var option = $("<option>"+$(this).text()+"</option>");
            //添加到下拉菜单
            $("#cityID").append(option);
        });
    })
}

$.ajax方式

function getCity(province){
    var index = province.selectedIndex;
    if(index == 0)
        return;
    var $province = $(province[index]).text();
    var url = "${pageContext.request.contextPath}/ajax_getCity?time="+new Date().getTime();
    var sendData = {
        province:$province
    }
    $.ajax({
        type:"POST",
        url:url,
        data:sendData,
        success:function(xml){
        //清空city下拉菜单
        $("#cityID option:gt(0)").remove();
        //xml是js对象
        var $xml = $(xml).find("city");
        $xml.each(function(){
            //text可以访问xml标签
            var option = $("<option>"+$(this).text()+"</option>");
            //添加到下拉菜单
            $("#cityID").append(option);
        });
    }});
}