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 相关文章推荐
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
Feb 05 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
基于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
WINXP下apache+php4+mysql
2006/11/25 PHP
discuz安全提问算法
2007/06/06 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
2017/09/27 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python+matplotlib+numpy实现在不同平面的二维条形图
2018/01/02 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
北京某公司的.net笔试题
2014/03/20 面试题
最新计算机专业自荐信
2013/10/16 职场文书
工作中个人的自我评价
2013/12/31 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
新年晚会开场白
2015/05/29 职场文书
财务管理制度范本
2015/08/04 职场文书
导游经典开场白——导游词
2019/04/17 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
MySQL 时间类型的选择
2021/06/05 MySQL
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python