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 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
window.open()实现post传递参数
Mar 12 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
vs2003 js文件编码问题的解决方法
2010/03/20 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
js判断为空Null与字符串为空简写方法
2014/02/24 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
vue debug 二种方法
2018/09/16 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
如何手写简易的 Vue Router
2020/10/10 Javascript
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
房屋委托书范本
2014/04/04 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL