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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php类中private属性继承问题分析
2012/11/01 PHP
php对数组排序代码分享
2014/02/24 PHP
php中JSON的使用与转换
2015/01/14 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
vue登录注册实例详解
2019/09/14 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
Python常用内置模块之xml模块(详解)
2017/05/23 Python
浅谈Python Opencv中gamma变换的使用详解
2018/04/02 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
建筑系毕业生自我鉴定
2014/01/24 职场文书
离职证明格式样本
2015/06/12 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
Python Matplotlib绘制两个Y轴图像
2022/04/13 Python