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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jQuery Plupload上传插件的使用
Apr 19 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现动态向上滚动
Dec 21 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取出数组单个值的方法
2018/03/12 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
JavaScript日期类型的一些用法介绍
2015/03/02 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
2017/12/07 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
np.random.seed() 的使用详解
2020/01/14 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
python集合的新增元素方法整理
2020/12/07 Python
如何使用Python进行PDF图片识别OCR
2021/01/22 Python
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
什么是属性访问器
2015/10/26 面试题
护理专业本科生自荐信
2013/10/01 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
安全生产标语大全
2014/10/06 职场文书
2014年人大工作总结
2014/12/10 职场文书
简历自我评价优缺点
2015/03/11 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
详解MySQL连接挂死的原因
2021/05/18 MySQL
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android