JQUERY新手学习笔记

作者:xrend 来源:IT步行网 时间:2008-09-28 12:43:00 

学习JQUERY就应该从最基本的学起,基本的就应该是语法了,在这里,我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了,都是些基础的,比如“变量,关键字,保留字,原始值,引用值,原始类型,引用类型,运算符,函数等一些基本的。”在JAVASCRIPT中重要一点的还是继承,和DOM,当然它和XML的联系也很重要。

我在这里只是带过,还得靠大家去看看, 我们的主要目标还是JQUERY。

这里先举一个例子,来了解下JAVASCRIPT,


<html> 
<head> 
<title>Introduction to the DOM</title> 
<script> 
window.onload = function(){//onload函数大家应该不会陌生吧 
// 这里就用到了DOM了,下面是去找出所有“LI”标签 
var li = document.getElementsByTagName("li"); 
for ( var i = 0; i < li.length; i++ ) { 
//这里用到了循环语句“for”作用是给所有的LI标签加载一个事件 
li[i].onmouseover = function() { 
this.style.backgroundColor = 'blue'; 
}; 
li[i].onmouseout = function() { 
this.style.backgroundColor = 'white'; 
}; 

}; 
</script> 
</head> 
<body> 
<h1>Introduction to the DOM</h1> 
<p class="test">There are a number of reasons why the 
DOM is awesome, here are some:</p> 
<ul id=”na”> 
<li id="everywhere">It can be found everywhere.</li> 
<li class="test">It's easy to use.</li> 
<li class="test">It can help you to find what you want, really quickly.</li> 
</ul> 
</body> 
</html> 

这个例子并不难,就是实现鼠标移上去和移开的事件,上面并没有用到JQUERY,下面我们来用JQUERY实现上面的效果,


$(document).ready(function() { 
       $("#na li ").hover(function() { 
              $(this).addClass("name1"); 
       }, function() { 
              $(this).removeClass("name2"); 
       }); 

1,在JQUERY中基本的操作就是选择文档中的某个值,一般都是通过用$()来完成,而且里面的参数可以是CSS中的任何选择符表达式。

2,加入新类是jQuery中独有的特性,.addClass()方法及其相反的方法.removeClass()可是更好的为我们的文档添加或删除样式 ,平时我们的javascript执行文档代码都是通过window.onload()方法,而jQuery有点特别,它是通过$(document).ready()结构来等DOM加载完成后触发调用。

标签:JQUERY,笔记,javascript
0
投稿

猜你喜欢

  • 深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)

    2024-04-22 13:24:54
  • Python三元运算实现方法

    2021-12-27 06:02:52
  • JAVA正则表达式校验qq号码的方法

    2023-08-09 02:54:25
  • python爬虫爬取图片的简单代码

    2021-08-04 10:19:27
  • Windows下Python的Django框架环境部署及应用编写入门

    2021-10-08 00:58:40
  • python开启debug模式的方法

    2023-05-10 02:58:31
  • asp连接MYSQL数据库的连接字符串(参数OPTION)

    2009-03-09 18:24:00
  • thinkPHP学习笔记之安装配置篇

    2023-09-27 18:32:03
  • matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)

    2021-06-09 02:33:06
  • windows下mysql 5.7版本中修改编码为utf-8的方法步骤

    2024-01-14 14:02:44
  • 一个css与js结合的下拉菜单支持主流浏览器

    2023-07-18 01:28:20
  • 利用ASP发送和接收XML数据的处理方法

    2009-02-02 08:57:00
  • Python脚本实现监听服务器的思路代码详解

    2021-01-16 08:44:55
  • PyCharm 2020.2下配置Anaconda环境的方法步骤

    2022-10-08 14:25:00
  • chatgpt 1020 错误码成功解决的三种方案(推荐)

    2023-02-03 17:33:28
  • Python德劳内三角剖分详解

    2021-02-18 23:08:49
  • mysql data文件夹位置查找

    2024-01-15 08:20:38
  • Python3.7中安装openCV库的方法

    2021-07-07 04:23:32
  • 如何将python文件打包成exe可运行文件

    2022-06-29 19:01:17
  • IE6图片加载的一个BUG解决方法

    2023-09-16 03:20:10
  • asp之家 网络编程 m.aspxhome.com