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复合事件结合toggle()方法的用法示例
Jun 10 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
jQuery 实现扁平式小清新导航
Jul 07 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新手入门学习方法
2011/05/08 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
ThinkPHP之getField详解
2014/06/20 PHP
ThinkPHP模型详解
2015/07/27 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
浅谈laravel数据库查询返回的数据形式
2019/10/21 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
Python fileinput模块使用实例
2015/06/03 Python
使用Python写个小监控
2016/01/27 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
十八届三中全会报告学习材料
2014/02/17 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
PO模式在selenium自动化测试框架的优势
2022/03/20 Python