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中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery弹框插件使用方法详解
May 26 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 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上传文件常见问题总结
2015/02/03 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
js取得url地址参数实例
2013/02/22 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
2019/05/15 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
js实现div色块碰撞
2020/01/16 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
Python中的index()方法使用教程
2015/05/18 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python lambda表达式(匿名函数)写法解析
2019/09/16 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
HTML5进度条特效
2014/12/18 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
英国广泛的照明产品网站:Lights4living
2018/01/28 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
关于抽烟的检讨书
2014/02/25 职场文书
学生会副主席竞聘书
2014/03/31 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python