jQuery中的jQuery()方法用法分析


Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery中的jQuery()方法用法。分享给大家供大家参考。具体如下:

jQuery()方法的定义和用法:
此方法可以接受一组选择器,用于匹配相应的元素。例如:

jQuery("div")

在实际应用中,一般用$定义jQuery,其实$就是jQuery的简写,比如$("li")可以写成jQuery("li")。
jQuery的核心功能都是通过此方法实现的,或者说以某种方式使用此方法实现。下面就详细介绍一下次方法的用法。
语法结构一:
当jQuery()方法没有任何参数的时候,会返回一个空jQuery对象。

jQuery()

实例代码:
<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>jQuery()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    alert(jQuery().length);

  })

})

</script>

</head>

<body>

  <button>点击查看效果</button>

</body>

</html>

语法结构二:

jQuery(selector,context)

参数列表:

参数 描述
selector 用来匹配元素的选择器。
context 可选。待查找的DOM元素集、文档或者jQuery对象。 如果没有指定,则就是当前整个文档。

如果没有指定,则就是当前整个文档。

实例代码:
实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>jquery()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("li").css("color","red");

  })

})

</script>

</head>

<body>

<div>

  <ul>

    <li>DIV+CSS专区</li>

    <li>jQuery专区</li>

    <li>HTML专区</li>

  </ul>

</div>

<ul>

  <li>ASP专区</li>

  <li>三水点靠木<span>欢迎您</span></li>

</ul>

<p>太阳出来了</p>

<button>点击查看效果</button>

</body>

</html>

以上代码能够将li元素中的字体颜色设置为红色。
实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>jquery()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("li",$("div")).css("color","red");

  })

})

</script>

</head>

<body>

<div>

  <ul>

    <li>DIV+CSS专区</li>

    <li>jQuery专区</li>

    <li>HTML专区</li>

  </ul>

</div>

<ul>

  <li>ASP专区</li>

  <li>三水点靠木<span>欢迎您</span></li>

</ul>

<p>太阳出来了</p>

<button>点击查看效果</button>

</body>

</html>

以上代码将div中li元素中的字体颜色设置为红色。
语法结构三:
将DOM元素、DOM元素数组转换成jQuery对象。

jQuery(element|elementArray)

参数列表:

参数 描述
element 要转换成jQuery对象的DOM元素。
elementArray 要转换成jQuery对象的DOM元素数组。

实例代码:
实例一:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>jquery()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $(document.getElementById("first")).css("color","red");

  })

})

</script>

</head>

<body>

<div>

  <ul>

    <li id="first">DIV+CSS专区</li>

    <li>jQuery专区</li>

    <li>HTML专区</li>

  </ul>

</div>

<ul>

  <li>ASP专区</li>

  <li>三水点靠木<span>欢迎您</span></li>

</ul>

<p>太阳出来了</p>

<button>点击查看效果</button>

</body>

</html>

以上代码可以将id为first的li元素中的字体颜色设置为红色。
实例二:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>jQuery()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $(document.getElementsByTagName("li")).css("color","red");

  })

})

</script>

</head>

<body>

<div>

  <ul>

    <li id="first">DIV+CSS专区</li>

    <li>jQuery专区</li>

    <li>HTML专区</li>

  </ul>

</div>

<ul>

  <li>ASP专区</li>

  <li>三水点靠木<span>欢迎您</span></li>

</ul>

<p>太阳出来了</p>

<button>点击查看效果</button>

</body>

</html>

语法结构四:

jQuery(callback)

jQuery(callback)是$(document).ready()的缩写形式,在上面的几个实例中都有使用。
它的作用是当文档加载完成以后再去执行callback函数
参数列表:
参数 描述
callback 文档加载完成之后要执行的函数。

实例代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8"/>

<meta name="author" content="https://3water.com/" />

<title>jQuery()函数-三水点靠木</title>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

jQuery(function(){

  alert("文档加载完成了");

})

</script>

</head>

<body>

</body>

</html>
jQuery(function(){

    alert("文档加载完成了");

})

与下面代码功能是相同的:

$(document).ready(function(){

    alert("文档加载完成了");

})

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
JS阻止冒泡事件以及默认事件发生的简单方法
Jan 17 Javascript
javascript表格的渲染组件
Jul 03 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
js实现动态显示时间效果
Mar 06 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
layui表格数据重载
Jul 27 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 #Javascript
基于jquery实现发送文章到手机的代码
Dec 26 #Javascript
jQuery中ajax的post()方法用法实例
Dec 26 #Javascript
jQuery中ajax的get()方法用法实例
Dec 26 #Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 #Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 #Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 #Javascript
You might like
编写漂亮的代码 - 将后台程序与前端程序分开
2008/04/23 PHP
Yii配置文件用法详解
2014/12/04 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
js回溯法计算最佳旅行线路代码实例
2019/09/11 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python中模块string.py详解
2017/03/12 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python 堆和优先队列的使用详解
2019/03/05 Python
提升Python程序性能的7个习惯
2019/04/14 Python
python爬虫之遍历单个域名
2019/11/20 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
英国名牌男装店:Standout
2021/02/17 全球购物
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
挂靠协议书范本
2014/04/22 职场文书
社区党员公开承诺书
2014/08/30 职场文书
婚礼新人答谢词
2015/01/04 职场文书
幼儿园新学期开学寄语
2015/05/27 职场文书
迎新生欢迎词2015
2015/07/16 职场文书
《检阅》教学反思
2016/02/22 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server