JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理

今天我继续更新jQuery学习笔记，最近考试比较忙，也就更新的比较慢了，这里向大家说一声抱歉，嘻嘻。

让那不愉快的情绪过去吧，继续进行我们的jQuery之旅吧。

一：jQuery对象和DOM对象

1.DOM对象

DOM，又称文档对象模型，是用来构建基本网页的，我们之前写的纯网页代码就可以算得上是一个DOM对象，每一个标签都是DOM元素结点。可以用JavaScript中的方法获得DOM对象。

2.jQuery对象

其实jQuery对象就是通过jQuery包装DOM对象后产生的对象。

在jQuery对象中无法使用DOM对象的任何方法，反之也是。这里我们要注意的是学习时要分清DOM对象和jQuery对象。

3.jQuery对象和DOM对象的相互转换

在转换之前，我们需要先约定好定义变量的风格。如果获取的对象是jQuery对象，需要在变量前面加上$，如下：

var $my = jQuery对象
var  my = DOM对象

(1)jQuery对象转成DOM对象

有时候对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，可以有如下两种处理方法：

a：jQuery对象是一个类似数组的对象，可以通过[index]的对象得到响应的DOM对象

代码如下：

var $my  = $("#my");    //jQuery对象
var  my2 = $my[0];      //DOM对象
alert(my2);            //检测这个my2DOM是否被选中

b：另一种方法可以通过get(index)方法啊得到相应的DOM对象

代码如下：

var $my  = $("#my");        //jQuery对象
var  my2 = $my.get(0);      //DOM对象
alert(my2);                 //检测这个my2对象是否被选中

(2)DOM对象转成jQuery对象

如果要把DOM对象转化为jQuery对象，只需要用$()把DOM对象包装起来，就可以得到一个jQuery对象了，代码如下：

var myDom = document.getElementById("my");        //DOM对象
var $myjQuery = $(myDom);                         //jQuery对象

当把它们互相转化后，就可以使用它们相对应的方法了。但这里要注意的是，它们的方法要对应它们自己的对象，不能混用，但jQuery对象提供了一套更加完善的工具用于操作DOM，后面会讲到。其实平时用到的jQuery对象都是通过$()函数制造出来的，$()函数可以认为是一个jQuery对象的加工厂。

我们先写一个拥有输入框和复选框的页面：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<title>测试网页</title>
    <script>
        $(document).ready(function(){
            //用户名
            var yongHuName;
            $("#yongHuName").blur(function(){                  //当鼠标失去焦点时才赋值给jQuery变量
                if(this.value=="")
                {
                    alert("姓名不能为空");
                }

                if(this.value.length > 4 )
                {
                    alert("姓名不能大于4位");
                }
                else
                {
                    yongHuName = $("#yongHuName").val();
                }
            });

            //密码
            var yongHuPassWord
            $("#yongHuPassWord").blur(function(){                  
                if(this.value=="")
                {
                    alert("密码不能为空");
                }

                if(this.value.length > 10)
                {
                    alert("密码不能大于十位");
                }
                else
                {
                    yongHuPassWord = $("#yongHuPassWord").val();
                }
            });

            //性别
            $("#getSex").click(function(){
                $("input[name='this']:checked").each(function(){
                    mySex = $(this).val();
                });
            });

            //同意用户协议
            var xieYi;
            $("#xieYi").click(function(){
                if(this.checked){
                    xieYi = $("#xieYi").val();
                }
                else
                {
                    xieYi = '';
                }
            });

            var html='';
            $("#QueDing").click(function(){
                if(xieYi=="on")
                {
                    html += '<table border="show">' +   '<tr>' + '<th>' + '姓名' + '</th>' +
                                                               '<th>' + '密码' + '</th>' +
                                                               '<th>' + '性别' + '</th>' +
                                                        '</tr>'
                            html +=                     '<tr>' + '<th>' + yongHuName + '</th>' +
                                                                '<th>' + yongHuPassWord + '</th>' +
                                                                '<th>' + mySex + '</th>'
                                                        '</tr>'+
                            '</table>';
                    $("#showResult").html(html);
                }
            });
        });
    </script>
</head>
<body>
    <div class="one"> 用户名
            <input type="text" id="yongHuName" name="yongHuName"/>
    </div>
    <br/>

    <div class="two"> 密码
        <input type="text" id="yongHuPassWord" name="yongHuPassWord"/>
    </div>
    <br/>

    <div class="three"> 性别
        <input type="radio" id="one" name="this" value="男"/> 男
        <input type="radio" id="two" name="this" value="女"/> 女
        <input type="button" id="getSex" value="获取选中值"/>
    </div>
    <br/>

    <div class="four">
        我同意用户协议
        <input type="checkbox" id="xieYi" name="yes"/>
    </div>
    <br/>

    <div class="five">
        <input type="button" id="QueDing" value="确定"/>
    </div>

    <div id="showResult"> 
    </div>
 </body>
</html>

效果如下：

当选中性别时，只有点中获取选中值后，才能够获取值。

如果不点我同意用户协议，就不会弹出获取的值，同意后，才可以后的输入的值：

三：解决与其他库的冲突

关于这个问题，一般是把库在其他JS库之前引用，这里就不详细讲解了。

JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理

猜你喜欢