jQuery二——jQuery中的方法

2018-04-06 本文已影响0人嗷老板

一、jQuery的核心方法

我们在上一篇文章中提到了jQuery的核心方法，接下来详细讲解一下核心方法。
jQuery的核心方法的方法名为jQuery(),别名为$()，一般使用别名调用核心方法。

jQuery核心方法的功能

设置页面加载完成之后要执行的代码

$(function(){
    alert("页面加载完成了！");
});

上面核心方法的使用是一个简写版本，完整版本是：

jQuery(document).ready(fucntion(){
    alert("页面加载完成了！");
});

获取标签的对象

var div01 = $("#div01");
alert(div01.html());

将字符串形式的标签转换成jQuery对象

var jQueryA = $("<a href = 'https://www.baidu.com'>百度</a>");
var div01 = $("#div01");
div01.html(jQueryA);

把dom对象转换成jQuery对象

var div01 = $(document.getElementById("#div01"));
alert(div01.html());

二、使用jQuery遍历集合对象

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var divList = $("div");
                //alert(divList[0].html());
                //方式1：普通for循环
                //for(var x = 0; x < divList.size(); x++) {
                //      var div = $(divList[x]);
                //      alert(div.html());
                //}

                //方式2：each方法
                //divList.each(function() {
                //      alert($(this).html());
                //});

                divList.each(function(index, element) {
                    alert(index + ":" + $(element).html())
                });

            });
        </script>
    </head>

    <body>
        <div>传智播客</div>
        <br />

        <div>黑马程序员</div>
        <br />

        <div>传智专修学院</div>
        <br />

    </body>

</html>

三、jQuery的常用方法

1、使用jQuery获取标签的标签体

html()
如果方法没有参数，则用于获取标签的标签体，有返回值
如果有参数，用于设置标签的标签体
类似于dom的innerHTML属性,能够解析html标签
text()
如果方法没有参数，则用于获取标签的标签体，有返回值
如果有参数，用于设置标签的标签体
不解析html标签，类似dom的innerText属性

2、使用jQuery获取标签的值

如果方法没有参数，则用于获取标签的标签的值
如果有参数，用于设置标签的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
            var jQueryDiv = $("#div01");
            
            //html()
            //如果方法无参，方法用于获取标签的标签体
            alert(jQueryDiv.html());
            //如果方法有参，方法用于设置标签的标签体，能够解析html标签
            //实现标签的替换
            jQueryDiv.html("黑马程序员");
            //实现内容的拼接
            jQueryDiv.html(jQueryDiv.html()+",黑马程序员");
            //修改div标签的内容
            jQueryDiv.html("<a href='https://www.baidu.com/'>百度</a>");
            
            //text()
            //如果方法无参，方法用于获取标签的标签体
            alert(jQueryDiv.text());
            //如果方法有参，方法用于设置标签的标签体，但是不能解析HTML标签
            //实现内容的拼接
            jQueryDiv.text(jQueryDiv.text()+",黑马程序员");
            
            //val()
            var inputList = $("[name=username]");
            //注意：如果集合只有一个元素，可以直接使用集合名称调用方法
            //如果方法无参，方法用于获取标签的值
            alert(inputList.val());
            //如果方法有参，方法用于获取标签的值
            inputList.val("lisi");
            
            });
        </script>
    </head>
    <body>
        <div id="div01">传智播客</div>
        <br />
        
        <input type="text" name="username" value="zhangsan" />
        <br />
        <a href='https://www.baidu.com/'>百度</a>
    </body>
</html>

3、使用jQuery获取标签属性的值

attr()
如果方法只有一个参数，方法用于获取标签属性的值
如果方法有两个参数，方法用于设置标签属性的值
removeAttr()
方法的参数为标签的属性名，用于删除这个标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //attr()：查询和修改标签的属性
                var aList = $("a");
                var inputList = $("input");
                //如果方法只有一个参数，方法用于获取标签属性的值
                alert(aList.attr("href"));
                alert(inputList.attr("value"));
                //如果方法有两个参数，方法用于设置标签属性的值
                aList.attr("href","http://www.qq.com/");
                inputList.attr("value","lisi");
                
                //removeAttr():删除标签的属性
                inputList.removeAttr("value");
            });
        </script>
    </head>
    <body>
        <a href="https://www.baidu.com">百度</a>
        <br />
        
        <input type="text" name="username" value="zhangsan" />
    </body>
</html>

4、使用jQuery设置获取CSS样式

css()
如果方法只有一个参数，方法用于获取标签CSS属性的值，参数为CSS标签属性的名称
如果方法有两个参数，方法用于设置标签属性的值，参数为CSS标签属性的名称和修改的属性
addClass()
为标签添加CSS属性，参数为CSS样式名
removeClass()
为标签删除CSS属性，参数为CSS样式名

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                height:100px;
                width:300px;
                border:1px solid blue;
            }
            
            .css01{
                height:200px;
                width:500px;
            }
            
            .css02{
                border:2px solid red;
            }
            
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript"> 
        $(function(){
            //使用jQuery设置获取CSS样式
            //css()
            var divList = $("#div01");
            //如果方法只有一个参数，方法用于获取标签CSS属性的值
            alert(divList.css("height"));
            alert(divList.css("width"));
            
            //如果方法有两个参数，方法用于设置标签CSS属性的值
            divList.css("height","300px");
            divList.css("width","500px"); 
            
            //可以通过attr()方法来为div标签设置class属性的值
            var spanList = $("#span01");
            //spanList.attr("class","css01 css02");
            //除了上面的方式，还可以通过addClass()设置class属性的值
            spanList.addClass("css01 css02");
            
            //removeClass()
            divList.removeClass("css01");
        });
         
        </script>
    </head>
    <body>
        <div id="div01">
            你好！
        </div>
        <span id="span01">hello!</span>
    </body>
</html>

5、判断选择器能否与调用方法的jQuery对象匹配

is()
参数为一个选择器，可以是各种类型的选择器，返回值类型是boolean类型。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .css01{
                height:200px;
                width:500px;
            }
            
            .css02{
                border:2px solid red;
            }
            
        </style>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript"> 
            $(function(){
                //is()
                var divList = $("#div01");
                //id选择器
                alert(divList.is("#div01"));
                //类选择器
                alert(divList.is(".css01"));
                //元素选择器
                alert(divList.is("div"));
                //其他的选择器
                alert(divList.is(":hidden"));
            });
        </script>
    </head>
    <body>
        <div id="div01" class="css01 css02">
            你好！
        </div>
    </body>
</html>

四、jQuery的事件处理

1、点击事件

我们在之前JavaScript中介绍了点击事件的处理方法，现在我们使用jQuery处理点击事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //点击事件的处理
                //使用dom完成事件处理
                var domButton01 = document.getElementById("button01");
                domButton01.onclick = function(){
                    alert("点击事件触发了！")
                }
                
                //jQuery的事件处理
                //click()
                var button01 = $("#button01");
                button01.click(function(){
                    alert("点击事件触发了！")
                });
            }); 
        </script>
        
    </head>
    <body>
        <input  type="button" id="button01" value="按钮"/>
    </body>
</html>

2、失去焦点时触发的事件

当我们点击一个文本框时，称为获得焦点；然后当我们点击别的位置时，称为失去焦点。这个事件在用户注册和登陆时使用较多。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //失去焦点时触发的事件
                //blur()
                var username = $("#username");
                username.blur(function(){
                    //var value = username.val();
                    //事件的内置对象this，代表触发事件的对象
                    var value = $(this).val();
                    if(value == ""){
                        alert("请输入用户名！");
                    }
                });
            });
        </script>
    </head>
    <body>
        <input  type="text" id="username" name="username"/>
    </body>
</html>

3、标签值发生变化时触发的事件

当我们的下拉选择框的选项发生变化时，可以通过change()方法来处理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //标签值发生变化时触发的事件
                //change()
                var select01 = $("#select01");
                select01.change(function(){
                    alert($(this).val());
                });
            });
                
        </script>
    </head>
    <body>
        <select id="select01">
            <option value="篮球">篮球</option>
            <option value="足球">足球</option>
            <option value="乒乓球">乒乓球</option>
            <option value="羽毛球">羽毛球</option>
        </select>
    </body>
</html>