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 相关文章推荐
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现雪花飘落效果
Aug 02 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
php实现的顺序线性表示例
2019/05/04 PHP
JavaScript 空位补零实现代码
2010/02/26 Javascript
Checbox的操作含已选、未选及判断代码
2013/11/07 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
Python列表解析配合if else的方法
2018/06/23 Python
利用pandas将非数值数据转换成数值的方式
2019/12/18 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
python中如何打包用户自定义模块
2020/09/23 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
学校采购员岗位职责
2014/01/02 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
班级文化标语
2014/06/23 职场文书
环卫工作汇报材料
2014/10/28 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2016入党心得体会范文
2016/01/06 职场文书
python用字节处理文件实例讲解
2021/04/13 Python