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+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery实现购物车基本功能
Oct 25 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
JS 控件事件小结
2012/10/31 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
JSON相关知识汇总
2015/07/03 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
2016/02/19 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Vue header组件开发详解
2018/01/26 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
js实现淘宝首页的banner栏效果
2019/11/26 Javascript
python 换位密码算法的实例详解
2017/07/19 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python使用matplotlib实现的图像读取、切割裁剪功能示例
2018/04/28 Python
78行Python代码实现现微信撤回消息功能
2018/07/26 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
详解Python文件修改的两种方式
2019/08/22 Python
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
大三自我鉴定范文
2013/10/05 职场文书
家长给孩子的评语
2014/01/30 职场文书
酒店中秋节活动方案
2014/01/31 职场文书
教师现实表现材料
2014/02/14 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书