jquery使用经验小结


Posted in Javascript onMay 20, 2015

1,今天发现jquery获取的dom对象除了jquery对象外,还可以访问原来的对象,只要加一个[]就行了,原来还有这样的功能,之前没仔细研究。

2,用了first-child,nth-child(n),获取元素集合里面的第几个元素。

3,用Jquery访问nodeText节点,通过访问原来的对象,nextSibling访问。访问是nextSibling.nodeValue;

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>Zephyr's Document</title>
  <script src="http://common.cnblogs.com/script/jquery.js"></script>
  <style type="text/css" media="screen">
  /*<![CDATA[*/
 
  /*]]>*/
  </style>
  <script type="text/javascript">
  $(function(){
  var tempBr=$("br");
  tempBr.each(function(index,doElem){
    doElem.nextSibling.nodeValue=doElem.nextSibling.nodeValue.replace(/\s{6}/g,"");
  })})
  </script>
  </head>
  <body>
  asdf
    <br />
    "   asdf"
    <br />
    "   asdf"
    <br />
    "   asdf"
  </body>
</html>

4.DOM对象和jQuery对象转换

获取DOM对象代码如下:

//获取DOM对象
var div1 = document.getElementById("div1");
div1.innerHTML = "oec2003";

获取jQuery对象代码如下:

//获取jQuery对象
var div1 = $("#div1");
div1.html("oec2003");

jQuery对象转DOM对象

//因为ajQuery对象是一个数组对象,所以转换为DOM对象时要用索引的形式
var $div1 = $("#div1"); //jQuery对象
var div1 = $div1[0]; //转换为了DOM对象
var div2 = $div1.get(0); //和上面一行效果一样
div1.innerHTML = "oec2003";

DOM对象转jQuery对象

//DOM对象转jQuery只需用$包装即可
var div1 = document.getElementById("div1");
var $div1 = $(div1); //转换为了jQuery对象
$div1.html("oec2003");

5.解决冲突

有时会有jQuery和其他的库或自己写的一些公共脚本文件一起使用的场景,就有可能会出现$冲突的问题,冲突的解决分两种情况:

1、jQuery库在其他库之后引用,如下所示:

<script type="text/javascript" src="Scripts/jquery-1.8.1.min.js"></script>

<script type="text/javascript" src="Scripts/common.js"></script>

在common.js中有对$重新定义,代码如下:
function $(id) {

  return document.getElementById(id);
}

下面是在jQuery中解决冲突的代码,有四种方式:

//方式1
jQuery.noConflict(); //将$控制权移交出去,以前使用$的地方都改用jQuery
jQuery(document).ready(function () {
  alert(jQuery("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式2
var $j=jQuery.noConflict(); //定义快捷方式
$j(document).ready(function () {
  alert($j("#span1").html());
});

window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式3
jQuery.noConflict(); //在函数内部继续使用$
jQuery(function ($) {
  alert($("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

//方式4
jQuery.noConflict(); //在函数内部继续使用$另一种方式
(function ($) {
  $(function(){
    alert($("#span1").html());
  });
})(jQuery);
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

2、jQuery库在其他库之前使用

//如果先引用jQuery脚本,可以不使用noConflict
//jQuery.noConflict(); 
jQuery(document).ready(function () {
  alert(jQuery("#span1").html());
});
window.onload = function () {
  $("span1").innerHTML = "oec2003";
}

以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
Javascript中浮点数相乘的一个解决方法
Jun 03 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
微信小程序图片宽100%显示并且不变形
Jun 21 Javascript
微信小程序左滑删除功能开发案例详解
Nov 12 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
JS快速实现简单计算器
Apr 08 Javascript
js实现字符串转日期格式的方法
May 20 #Javascript
JavaScript实现带标题的图片轮播特效
May 20 #Javascript
手机端页面rem宽度自适应脚本
May 20 #Javascript
jquery实现弹出层效果实例
May 19 #Javascript
jQuery结合ajax实现动态加载文本内容
May 19 #Javascript
jQuery实现在列表的首行添加数据
May 19 #Javascript
jQuery中 prop() attr()使用详解
May 19 #Javascript
You might like
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
jQuery Ajax使用 全解析
2010/12/15 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
jQuery图片的展开和收缩实现代码
2013/04/16 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
javascript操作css属性
2013/12/30 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[00:43]2016完美“圣”典风云人物:单车宣传片
2016/12/02 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python多线程扫描端口(线程池)
2019/09/04 Python
生产部管理制度
2014/01/31 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
总结Pyinstaller打包的高级用法
2021/06/28 Python
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技