jQuery 学习过程笔记

1:$符号表示jQuery   可以等价为$=jQuery

例如:   $();  ==  jQuery();

$(function(){alert("$表示的是什么")}); ==  jQuery(function(){alert("$符号表示的就是jQuery")});

2:DOM对象和jQuery对象的相互转化(jQuery对象不能调用DOM对象,DOM同样不能够调用jQuery对象)

a)jQuery对象转化为DOM对象时只需调用jQuery对象的方法或者属性即可

例如:

  $(

    function(){

      var $li =  $("li") ;// jQuery方法$("li")获得jQuery对象集合  li 数据

      var li   = $li[0] ; // 通过jQuery 对象的下标获得某个DOM对象,此时转化完成

               //现在便可以调用li的DOM方法或属性了

  });

b)DOM对象转化为jQuery对象,直接调用$()函数即可转化

例如:

  $(

    function(){

      var li = document.getElementByTagNames("li"); //获取所有li集合

      var $li = $(li[0]); //直接调用$()函数转化为jQuery对象 ,这里面我们

               //也可以直接用$()函数转化整个li数组,即:var $li = $(li);

      alert($li.html());

    }

  );

jQuery对象不能调用DOM对象,DOM同样不能够调用jQuery对象

例如:

<script type="text/javascript" >
$(function(){
  var $li = $("li");
  var li = $li.get(0);
  $li.append($("<li> new item </li>")); 
  alert(li.innerHTML);
});
</script>

打印效果如图:

  • the one li
  • new item
  • the two li
  • new item
  • the thred li
  • new item

如果我们替换红色代码为$li.get(0).append($("<li>new item</li>"));则得不到我们想要的

结果,原因jQuery对象经过get(index)的转化后,该对象已经转化为了DOM对象,append

为jQuery对象,所以结果不正确,另:var li = $(li[0]);同样是转化。

注意:区分  $(li);  $li  ; $("li") 的不同含义$(li)转化,$li设置jQuery对象 ,$("li")获取li对象。

3:jQuery的ready和DOM的onload方法的区别

在没有外部文件需要加载的情况下,两者的效果一致,在有外部文件加载的时候,ready优于onload(同步性)

解释:jQuery的ready是在DOM绘制完成之后执行的,onload则是在页面完全加载之后才执行,了解此知识需要

了解浏览器对网页的加载顺序。不赘述(在有外部文件加载的时候用jQuery的ready(),没有两者都可以);补充

DOM对象onload一个网页中只能被执行一次,而jQuery的ready事件可以被执行任意次($(function(){jQuery代码}))

4:$("id") 效果等价 document.getElementById("id") 但是 功能不等价 前者有转化为jQuery对象功能,可以在$("id")

后调用jQuery方法,而后者不能。

//********************************未完待续****************************//

时间: 2024-08-01 12:48:51

jQuery 学习过程笔记的相关文章

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习笔记--JqGrid相关操作 方法列表(上)

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

jQuery整理笔记七----几个经典表单应用

1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用,仅仅是一个小技巧,能够提高用户体验. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

jQuery学习笔记之过滤器三(向上查找兄弟元素、向下查找兄弟元素)

向上查找兄弟元素的方法:prev方法.prevAll方法.prevUntil方法 向下查找兄弟元素:next方法.nextAll方法.nextUntil方法 向上查找兄弟元素 1.prev方法 2.prevAll方法 3.prevUntil方法 向下查找兄弟元素 1.next方法 2.nextAll方法 3.nextUntil方法 jQuery学习笔记之过滤器三(向上查找兄弟元素.向下查找兄弟元素)

jQuery整理笔记八----jQuery的Ajax

Ajax,我一直读的是"阿贾克斯",据当时大学老师讲该读音出处是根据当年风靡欧洲的荷兰足球俱乐部阿贾克斯的名字来的,我觉得说法挺靠谱的. jQuery封装了Ajax的交互过程,用户不需要考虑XMLHttpRequest对象的兼容性问题以及使用XMLHttpRequest建立连接.发送请求.发送方式.接收方式等细节,利用jQuery定义 的几个简单方法,即可轻松实现客户端与服务端异步通信的问题,从而帮助开发人员从繁琐的技术细节中解脱出来,专心于业务层开发工作. 最初始的JavaScrip

jquery练习笔记

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> #pannel { position:relative; width:100px; height:100px; b

jQuery 入门笔记1

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多). 1:jQuery使用 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#