jQuery 选择器用法基础入门示例


Posted in jQuery onJanuary 04, 2020

本文实例讲述了jQuery 选择器用法。分享给大家供大家参考,具体如下:

今儿个开始学习jQuery,在学习jQuery之前我们应该掌握js,我之前也写过几篇笔记,但是只是小部分的知识,js也不是很难 可以自己简单的看看。以后写js会经常用到jQuery这个库。

1 安装jQuery

1.1 从官网下载

可以从 jQuery.com 下载。有两个版本可以选择:

  • production:被精简压缩过,常用于实际网站。
  • development:源码,可读性高,常用于开发阶段。

1.2 CDN引入

百度CDN:

<head>
  <title>learn javascript</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

新浪CDN:

<head>
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>

2 文档就绪

文档就绪是为了防止在HTML文档还未完成加载时就执行了js 这样可能会出现一些错误,比如说在文档还没有加载完成 js代码就执行了隐藏某一个还没加载的元素时 就会出错。

<script>
  $(document).ready(function() {
    // 在这里 HTML文档已经被加载完成 在这里操作是安全的。
  })
</script>

3 选择器

现在要说说jQuery的语法了 jQuery对DOM操作是很方便的 jQuery使用选择器:

  • $("*"):选择所有元素。
  • $(this):选择当前元素。
  • $(.className):选择class为"className"的元素。
  • $("p.className"):选择class为"className"的<p>元素。
  • $("#demo"):选择id为demo的元素。
  • $("h1#demo"):选择id为demo的<h1>元素。
  • $("h1:first"):选择第一个<h1>元素。
  • $("ul li:first"):选择第一个<ul>元素下第一个<h1>元素。
  • $("ul li:first-child"):选择每个<ul>元素下的第一个<h1>元素。
  • $("[href]"):选择带有href属性的元素。
  • $("a[target='_blank']"):选择target属性等于blank的<a>元素。
  • $("a[target!='_blank']"):选择target属性不等于blank的<a>元素

3.1 示例

<!DOCTYPE html>
<html>
<head>
  <title>learn javascript</title>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <p id="p1">文本</p>
</body>
{{--js--}}
<script>
  $(document).ready(function() {
    $("#p1").hide()
  })
</script>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

jQuery 相关文章推荐
jQuery操作之效果详解
May 19 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 #jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 #jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 #jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 #jQuery
You might like
php 无限分类的树类代码
2009/12/03 PHP
PHP性能优化工具篇Benchmark类调试执行时间
2011/12/06 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
2012/01/08 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
canvas绘制多边形
2017/02/24 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
2019/05/22 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
Python判断操作系统类型代码分享
2014/11/22 Python
Python的Tornado框架异步编程入门实例
2015/04/24 Python
python学生信息管理系统(完整版)
2020/04/05 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
详解python破解zip文件密码的方法
2020/01/13 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
python如何导入依赖包
2020/07/13 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
社区班子对照检查材料
2014/08/27 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书