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查找dom的几种方法效率详解
May 17 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
探讨捕获php错误信息方法的详解
2013/06/09 PHP
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php实现的ping端口函数实例
2014/11/12 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
Python字符串三种格式化输出
2020/09/17 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
方正Java笔试题
2014/07/03 面试题
初中毕业生的自我评价
2014/03/03 职场文书
《云房子》教学反思
2014/04/20 职场文书
员工2014年度工作总结
2014/12/09 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
怒海潜将观后感
2015/06/11 职场文书
中学总务处工作总结
2015/08/12 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
Python字典和列表性能之间的比较
2021/06/07 Python
SQL 聚合、分组和排序
2021/11/11 MySQL
Python语言内置数据类型
2022/02/24 Python