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库冲突处理相关推荐

jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo("f ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
jQuery学习笔记（二）使用选择器一
jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的注意,在jQuery中通过各种选择器和方法获取的结果集 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
Jquery学习笔记：获取jquery对象的基本方法
jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...
jQuery学习笔记（二）—— 操作DOM元素
使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使用a ...
jQuery 学习笔记之九 (jQuery 图片提示 )
案例研究网站的超链接和图片提示1.超级链接提示效果浏览器已经自带了超级链接提示,只需要在超链接中加入title属性就可以了.HTML 代码如下:<a href="#" ti ...
javascript高级编程学习笔记（二）——继承
2019独角兽企业重金招聘Python工程师标准>>> 写读书笔记的好处在于加深记忆,前一篇总结了编程中创建的对象的几种方式,以及常用的方式,这一篇总结实现继承的方式: 1.对象冒充 ...

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

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

最新文章

热门文章