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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
jQuery实现简单弹幕制作
Dec 10 jQuery
jQuery实现增删改查
Dec 22 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/09/30 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP上传图片时判断上传文件是否为可用图片的方法
2016/10/20 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
2012/01/20 Javascript
jQuery cdn使用介绍
2013/05/08 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
Node.js安装教程和NPM包管理器使用详解
2014/08/16 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
bootstrap下拉菜单使用方法解析
2017/01/13 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
基于python编写的微博应用
2014/10/17 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
决策树剪枝算法的python实现方法详解
2019/09/18 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
Python实现手势识别
2020/10/21 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
公休请假条
2014/04/11 职场文书
大学升旗仪式主持词
2015/07/04 职场文书
浅析Python实现DFA算法
2021/06/26 Python
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
MySQL数据库 安全管理
2022/05/06 MySQL