JQuery核心函数是什么及使用方法介绍


Posted in Javascript onMay 03, 2016

jquery对于一个程序员来说,或多或少都听过。相信很多人在项目中也都用过。现在也有很多开源的库都是依赖于jQuery,因此熟悉jQuery还是很有必要的。使用熟练的大神可以简单看看,对于小白来说还是纯纯的干货。熟悉jQuery还是先从核心函数入手比较好,后面其他的功能都是在此核心函数的基础上扩展的。

jQuery 核心函数 jQuery(expression, [context])

JQuery核心函数是什么及使用方法介绍

jQuery(html, [ownerDocument])

JQuery核心函数是什么及使用方法介绍

jQuery(html, props)

JQuery核心函数是什么及使用方法介绍

jQuery(elements)

JQuery核心函数是什么及使用方法介绍

jQuery()

JQuery核心函数是什么及使用方法介绍

jQuery(callback)

JQuery核心函数是什么及使用方法介绍

测试用例

以下是通过代码的方式测试上述jQuery核心函数,供不明白的朋友们参考:

<!DOCTYPE html>
<html>
<head>
 <title>JQueryTets</title>
 <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--
  测试jQuery环境是否OK
  使用$(function(){js代码});表示网页在加载的过程中执行
  下面存在多个以上函数,在网页加载的过程中会分别弹出"jquery.min.js ready!"和"auto load..."
  即:一个网页中可以出现多个$(function(){js代码}); 它们在网页加载的过程中会按照先后出现的顺序执行
-->
<script type="text/javascript">
 $(function(){
  // alert("jquery.min.js ready!");
 });

 $(function(){
  // alert("auto load...");
 });
</script>
jQuery核心函数:
<!--
  jQuery核心函数之一jQuery(expression, [context])
-->
<!--1.第一种情形-->
<div>
 <p id="h1">id为h1的p标签</p>
 <p>p标签</p>
</div>
<script type="text/javascript">
 //获取div下的p标签节点
 var plist = $("div > p");
 // alert(plist.size()); //输出结果是2 即是上面的div内存在两个p标签 可以使用size()函数查看集合元素的个数
 var div_p = $("div p");
 // alert(div_p.get(0)); //效果同上,可以使用get(index)获取集合中指定的元素(注意不是对象),index为集合元素的下标
</script>
<!--1.第二种情形-->
<form>
 <input id="text" type="text" value="this is text"></input><br>
 <input type="radio" name="city">安徽</input>
 <input type="radio" name="city">北京</input>
 <input type="radio" name="city">上海</input>
 <input type="radio" name="city">广东</input>
</form>
<script type="text/javascript">
 var pInForm = $("input:radio",document.forms[0]); //获取form表单中的radio标签
 var tInForm = $("input:text",document.forms[0]); //获取form表单中的text标签
 var ahInputNode = tInForm.get(0); //获取form表单中的第一个text元素
 // alert(pInForm.size());  // 输出结果是4
 // alert(ahInputNode.value); // 输出结果是 this is text
 // alert($("#text").val()); // 输出结果是 this is text 但是需要注意与上一个的区别
</script>
<hr>
<!--
  jQuery核心函数之二jQuery(html, [ownerDocument])
-->
<div id="hx2"></div>
<script type="text/javascript">
 $("<font color='red'>这是动态添加的font标签</font>").appendTo("#hx2"); //动态的在上面id为hx2的div里添加font标签
</script>
<hr>
<!--
  jQuery核心函数之三jQuery(html, props)
-->
<div id="hx3"></div>
<script type="text/javascript">
 $("<div>",{
  text:"click me",
  click:function(){
   alert("click!")
  }
 }).appendTo("#hx3"); //动态的创建div标签 并添加相应的属性和响应事件
</script>
<br>
<!--
  jQuery核心函数之四jQuery(elements)
-->
<div id="hx4">jQuery核心函数之四jQuery(elements)</div>
<div id="hx4d" onclick="hided()">点一下就会隐藏</div>
<script type="text/javascript">
 $("#hx4").css("background-color","gray"); //给id为hx4的div添加样式,设背景色为灰色
 function hided()  
 {
  $("#hx4d").hide(); //隐藏id为hx4d的div标签
 }
</script>
<!--
  jQuery核心函数之五jQuery()
  返回一个空的jQuery对象。
  jQuery 1.4中,如果不提供任何参数,则返回一个空jQuery对象。在先前版本中,这会返回一个包含document节点的对象。
-->
<script type="text/javascript">
 var jQueryObj = $();
 // alert(jQueryObj.size()); //结果为0 也就是返回的是一个空对象
</script>
<!--
  jQuery核心函数之六jQuery(callback)
  $(document).ready()的简写。
  允许你绑定一个在DOM文档载入完成后执行的函数。这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的$()操作符都包装到其中来。从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。 
-->
<script type="text/javascript">
 $(function(){
  // alert("jQuery核心函数之六jQuery(callback)");
 });
</script>
</body>
</html>

运行结果:

JQuery核心函数是什么及使用方法介绍

以上就是介绍的jQuery的核心函数模块,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
原生js实现shift/ctrl/alt按键的获取
Apr 08 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
jquery+json实现动态商品内容展示的方法
Jan 14 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
js数据类型检测总结
Aug 05 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
详解Vue的sync修饰符
May 15 Vue.js
jquery对象访问是什么及使用方法介绍
May 03 #Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 #Javascript
javascript的BOM
May 03 #Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
May 03 #Javascript
深入浅析Bootstrap列表组组件
May 03 #Javascript
前端jquery部分很精彩
May 03 #Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 #Javascript
You might like
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP5.3新特性小结
2016/02/14 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
2015/08/31 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
js自制图片放大镜功能
2017/01/24 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
python 把数据 json格式输出的实例代码
2016/10/31 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
pandas数据处理之绘图的实现
2020/06/15 Python
python中数字是否为可变类型
2020/07/08 Python
利用python 下载bilibili视频
2020/11/13 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
2016/03/25 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
电焊工工作岗位职责
2014/02/06 职场文书
英语故事演讲稿
2014/04/29 职场文书
物流专业自荐信
2014/05/23 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL