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+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery实现手风琴特效
Jan 11 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代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php动态变量定义及使用
2015/06/10 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php session的应用详细介绍
2017/03/22 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
vuejs实现递归树型菜单组件
2018/01/13 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
原生js实现购物车
2020/09/23 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python中模块查找的原理与方法详解
2017/08/11 Python
Django设置Postgresql的操作
2020/05/14 Python
Python基于pip实现离线打包过程详解
2020/05/15 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
爱情保证书范文
2014/02/01 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
运动会加油稿20字
2014/11/15 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL