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框架Ajax常用选项
Jul 08 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
第十三节--对象串行化
2006/11/16 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
javascript demo 基本技巧
2009/12/18 Javascript
根据出生日期自动取得星座的js代码
2010/07/20 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
javascript实现考勤日历功能
2018/11/29 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
python 解析html之BeautifulSoup
2009/07/07 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
TensorFLow 变量命名空间实例
2020/02/11 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Ubuntu20.04环境安装tensorflow2的方法步骤
2021/01/29 Python
驴妈妈旅游网:中国新型的B2C旅游电子商务网站
2016/08/16 全球购物
广州盈通面试题
2015/12/05 面试题
北京奥运会主题口号
2014/06/13 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
社区党员干部承诺书
2015/05/04 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python