.JQuery文档分析2--JQuery核心与属性操作

JQuery文档 属性的操作....以及一些核心函数用法

1、

$(document).ready(function(){})  是一个文档就绪函数就是在  window.onLoad完全加载执行之后才开始执行ready内部的函数

这等同  $().readdy()  和 $()    

 

2、

这个类似与java中的for each...就是遍历获取到的所有ul中的li对象.集合 ..然后注册一个函数,这个函数要有一个参数 ,每次会传递一个

基于0递增的数字 ...代表每个dom元素在jQuery对象序列中的索引..当然也可以不传递..参数

$("ul li").each(function(i){           

     this.innerHTML="XXX"+i;    }    //this代表当前dom对象 ..我们可以像HTML DOM一样操作元素
   );

 

 

3、

返回jQuery对象中的dom元素的个数 

$("img").size();  这个是方法
$("img").length; 这个是属性
 
4、
返回jQuery对象的选择器...下面的选择器就是 div#foo ul:not([class]) 表示div中id为foo的div  中的不包括class属性的ul元素  ,返回值就是字符串
 $("div#foo ul:not([class])").selector 
 
5、
 $("ul", document.body).context.nodeName   返回节点的名字...即第二个参数..如果第二个参数为空那么默认是 当前文档

 

 6、

获取li的jQuery对象中索引为0的li的dom独享并且将innerHTML设置为 innerHTML

$("li").get(0).innerHTML="innerHTML";

 

7、

遍历jQuery中的dom集合

$().ready(
  function(){
  var col=$("li").get()  ;
  for(var i in col){
   col[i].innerHTML="DOM 集合遍历";
  }
  }
  );

 

8、

$('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置$('li').index($('#bar')); //1,传递一个jQuery对象$('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置$('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置$('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。  
9、
jQuery的data方法给dom元素设置键值对 .... 如果不设置那么是null或者 undefined
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
  $().ready(function(){
     $("ul li#one").data("data",{key1:"key1",key2:"key2"}) ;
     $("button").click(function(){
      $("#one").text($("#one").data("data").key1);
      $("#two").get(0).innerHTML=$("#one").data("data").key2;      
     }) ;
  }) ;
</script>
<title>Insert title here</title>
</head>
<ul>
<li id="one"></li>
<li id="two"></li>
<li id="three"></li>
<li id="four"></li>
<li id="five"></li>
</ul>
<button>显示数据</button>
</body>
</html>
10、
移除div上这只的key为greeting的数据

$("div").removeData("greeting");

 

11、

上述data方法的底层实现///不建议使用

jQuery.data(document.body, 'foo', 52);jQuery.data(document.body, 'bar', 'test');

12、
jQuery.noConflict();   防止 jQuery$和其他库冲突...如果其他库在这个jQuery引入之后那么可以使用jQuery代替$

否则重新定义$

var newfunc=jQuery.noConflict() ;

newfunc("div").hide();

累死了睡觉

时间: 2024-09-28 11:45:04

.JQuery文档分析2--JQuery核心与属性操作的相关文章

JQuery文档分析1-JQuery核心与选择器

最新学习DWZ框架 ,最后发现有必要先学习下JQuery.JQuery,发现跟着视频学习无法完全更好的理解,没办法只能自己看文档学习,毕竟官方的文档才是王道. 我下载的文档时JQuery1.7 ,幸好有中文版  JQuery是对javascript 的一个封装,目的是在用更少的代码开发出更强的交互性web , 其实所谓的JQuery库也只是一个js文件而已,可以去官方下载到.. 在自己的web中使用jQuery只需要 增加  <script type="text/javascript&qu

jQuery文档分析4-属性的动态设置

例子1:  动态设置img的src属性  其他dom元素雷同 用于动态属性的设置 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript" src="js/jquery.js"></script&g

.jQuery文档分析4-文档处理

文档处理就是在dom元素中添加html内容 1.  $("p").append("<a href='www.baidu.com'>baidu</a>") ;  增加内容到p标签内部  2. $("p").appendTo("div") ;  把所有的p元素增加到div中 3. $("p").prepend("<b>Hello</b>"); 

.jQuery文档分析3-jQuery元素筛选

筛选时从包含一个或者多个dom对象的jQuery对象中找出某个dom对象所对应的jQuery对象我们从而可以进行操作 1. $("p").eq(-2)  从搜索到的p标签中选择出倒数第二个p元素对应的jQuery对象注意不是dom对象,这里要和get方法区分开 . get方法是获取dom对象然后 根据html dom进行操作 如果从正向开始筛选那么,索引时基于0的 2. $("li").first()  选择出搜索到的li序列对应的jQuery中的第一个li对应的j

jquery 文档碎片DocumentFragment

文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用.   createDocumentFragment有什么作用 多次使用节点方法(如:appendChild)绘制页面,每次都要刷新页面一次.效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把所有的新结点附加在其上,然后把文档碎片的内容一次性添加到document中,这也就只需要

jQuery源码分析之jQuery.fn.each与jQuery.each用法_jquery

本文实例讲述了jQuery源码分析之jQuery.fn.each与jQuery.each用法.分享给大家供大家参考.具体分析如下: 先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 复制代码 代码如下: $('div').each(function(index, elem){       $(this).addClass('red'); } }); 上面用的的.each,即jQuery.fn.each,其内部是通过jQuery.each实现的 复制代码 代码如下: j

Jquery源码分析---构建Jquery的Dom元素

在jQuery.fn.init函数中,最终的结果是把Dom元素放到jQuery对象的集合, 我们可以传入单个Dom元素或Dom元素集合直接把其存到jQuery对象的集合.但是 如果第一个参数是string类型的话,如#id就要把Dom文档树去查找.对于html的 片断就得生成Dom元素.我们再进一步,传入的单个Dom元素或Dom元素集合参数 又是从那里来的?我们可以通过Dom元素的直接或间接的查找元素的方式. 这一部分首先分析如何从html的片断就得生成Dom元素,然后分析jQuery 是如何通

Jquery源码分析---构建jQuery对象

2.1.jQuery的设计理念 使用jQuery之前,我们都会问jQuery是什么?jQuery是一个类库,和 prototype,mootools等类库一样,为Web的Js开发提供辅助功能.那为什么要选 用jQuery呢?在jQuery出现之前,Prototype,YUI都是很成熟的Js的框架,而且 是各有各的特点.为什么要抛弃它们,而使用后起之秀的jQuery,它有什么优秀 的特性吸引开发人员呢? 回答这个问题,我们得明白jQuery的设计理念.回忆或想象一下,我们在web 开发中是如何使用

jQuery源码分析之jQuery中的循环技巧详解_jquery

jQuery的源码中有很多值得学习借鉴的技巧,本文即收集了jQuery中出现的各种遍历技巧和场景.具体分析如下: // 简单的for-in(事件) for ( type in events ) { } // 缓存length属性,避免每次都去查找length属性,稍微提升遍历速度 // 但是如果遍历HTMLCollection时,性能提升非常明显,因为每次访问HTMLCollection的属性,HTMLCollection都会内部匹配一次所有的节点 for ( var j = 0, l = ha