开发者社区> 技术mix呢> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Jquery基础教程

简介:
+关注继续查看

1. jQuery概述

- jQuery是一个优秀的JavaScript框架

- 主要提供如下功能

  - 访问页面框架的局部

  - 修改页面的表现

  - 更改页面的内容

  - 响应事件

  - 为页面添加动画

  - 与服务器异步交互

  - 简化常用的JavaScript操作

- 下载并使用jQuery

  - 官方网站(http://jquery.com/

  - 不需要任何安装过程

2. jQuery的“$”

- 选择器

- 功能函数前缀

- window.onload

  - window.onload的冲突

  - ready()方法

- 创建DOM元素

3. 选择器

- 属性选择器

- 位置选择器

3. 实例

实例一 :一行代码实现隔行变色效果:

Code

运行效果:

 

实例二 :选择器

Code

 

运行效果:

 

 

实例三:字符串操作:

Code

 

实例4:获取浏览器的型号和版本号“

 

Code

四:核心部分

$(expr):该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础。expr:字符串,一个查询表达式或一段html字符串

例子:

<p>one</p>
<div>
      
<p>two</p>
</div>
    
<p>three</p> 
    
<href="#" id="test" onClick="jq()" >jQuery</a>

 

 

function jq(){  
    alert($("div > p").html());  
}

 

运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
    $("
<div><p>Hello</p></div>").appendTo("body");
}

 

当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”

 $(elem)

说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素

例子:
未执行jQuery前:

<p>one</p>
  
<div>
     
<p>two</p>
  
</div><p>three</p>
<href="#" id="test" onClick="jq()">jQuery</a>

 

 

function jq(){
    alert($(document).find("div > p").html());
}

 

运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
   $(document.body).background(
"black");
}

 

运行:当点击id为test的元素时,背景色变成黑色
$(elems)

说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:

<form id="form1">
      
<input type="text" name="textfield">
      
<input type="submit" name="Submit" value="提交">
</form>
<href="#" id="test" onClick="jq()">jQuery</a>

 

 

function jq(){ 
   $(form1.elements ).hide(); 
}

 

运行:当点击id为test的元素时,隐藏form1表单中的所有元素。

jQuery代码及功能:

四:总结

  通过Jquery使我们操作更加方便.






本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2008/08/22/1273929.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
+关注
2967
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载