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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
jQuery:unbind方法的使用详解
Aug 14 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 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与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
Laravel开启跨域请求的方法
2019/10/13 PHP
JavaScript 反科里化 this [译]
2012/09/20 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
require.js的用法详解
2015/10/20 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
python3代码中实现加法重载的实例
2020/12/03 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
什么是Remote Module
2016/06/10 面试题
新教师工作感言
2014/02/16 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python
OpenFeign实现远程调用
2022/08/14 Java/Android