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 相关文章推荐
分享8款优秀的 jQuery 加载动画和进度条插件
Oct 24 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
简单谈谈JS中的正则表达式
Sep 11 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 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
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
前端必学之PHP语法基础
2016/01/01 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
js 异步处理进度条
2010/04/01 Javascript
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
35个Python编程小技巧
2014/04/01 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
Python中的heapq模块源码详析
2019/01/08 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
幼教个人求职信范文
2013/12/02 职场文书
艺术教育实施方案
2014/05/03 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
判断Python中的Nonetype类型
2021/05/25 Python