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实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery实现滚动效果
Nov 17 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
PHP实现二维数组去重功能示例
2017/01/12 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
2014/06/23 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
Vue.js实现可编辑的表格
2019/12/11 Javascript
在VUE中使用lodash的debounce和throttle操作
2020/11/09 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python可以实现栈的结构吗
2020/05/27 Python
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
网络安全类面试题
2015/08/01 面试题
运动会800米加油稿
2014/02/22 职场文书
学生安全责任书范本
2014/07/24 职场文书
雷锋观后感
2015/06/10 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
Python中文纠错的简单实现
2021/07/07 Python
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL