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 相关文章推荐
JQuery 技巧和窍门整理(8个)
Apr 22 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
Jan 02 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
Aug 15 Javascript
JavaScript函数作用域链分析
Feb 13 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 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 preg_replace替换实例讲解
2013/11/04 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
mongodb和php的用法详解
2019/03/25 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
VUE中v-model和v-for指令详解
2017/06/23 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
python 求定积分和不定积分示例
2019/11/20 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
python程序如何进行保存
2020/07/03 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
美国旅游网站:Tours4Fun
2017/02/17 全球购物
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
建筑院校毕业生求职信
2014/06/13 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
单位员工收入证明样本
2014/10/09 职场文书
1000字打架检讨书
2014/11/03 职场文书
志愿者事迹材料
2014/12/26 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
python绘制云雨图raincloud plot
2022/08/05 Python