jquery入门(1）
1.jQuery简介
jQuery是一个快速、简洁的JavaScript框架,倡导写更少的代码，做更多的事情
jquery官方网站
jquery中文文档
1.1.简单函数封装
根据id、类名称来获取元素
function $(selector){
var str = selector.charAt(0)
if(str === "#"){
return document.getElementById(selector.substr(1))
}else if (str === "."){
return document.getElementsByClassName(selector.substr(1))
}
}
1.2.jquery的使用
初始化项目
npm init -y
安装jquery
npm install jquery@2.1.14 --save
引入jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
</head>
<body>
<div id="box">111</div>
<div class="box1"></div>
<script>
console.log($("#box"))
</script>
</body>
</html>
总结：jquery本质上就是一个使用javascript封装的一个工具库，可以是你写代码的时候更简洁高效，学习建议：记住并熟练应用jquery的各种方法、各种选择器就可以了
2.jQuery选择器
2.1 基本选择器
id选择器
$("#box").html() // 用 #号
类选择器
$(".box").html //用 . 号
标签选择器
$("div").html //直接给标签名
多元素选择器
$("#box,.box,div").html(); // 几种选择器组合
后代选择器
$("#box p").html() // 用空格隔开
子元素选择器
$("#box > p").html() ; // 用> 隔开
2.2 其他选择器
属性选择器
$("input[value=men]") ; //找 value=men的input元素
$("input[value*=men]") ; //找 value里面包含men的input元素
$("input[value^=men]") ; //找 value里面以men开头的input元素
$("input[value$=men]") ; //找 value里面以men结尾的input元素
简单过滤
:first
用法: $(”tr:first”) ; 匹配找到的第一个元素
:last
匹配找到的最后一个元素
:not(selector)
去除所有与给定选择器匹配的元素
:even
匹配所有索引值为偶数的元素，从 0 开始计数
:odd
匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)
匹配一个给定索引值的元素，从 0 开始计数
:gt(index)
匹配所有大于给定索引值的元素，从 0 开始计数
:lt(index)
匹配所有小于给定索引值的元素，从 0 开始计数
螺钉课堂视频课程地址：http://edu.nodeing.com
jquery入门(1）的更多相关文章
- jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（2）使用jQuery操作元素的属性与样式
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（3）事件与事件对象
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- jQuery入门（4）jQuery中的Ajax应用
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
- JQuery入门
JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...
- jQuery入门必须掌握的一些API
jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...
- Web前端JQuery入门实战案例
前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
- jquery(入门篇)无缝滚动
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 第一百六十二节，jQuery入门介绍
jQuery入门 学习要点: 1.什么是 jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本 I ...
- jQuery入门--- 非常好
jQuery入门------https://blog.csdn.net/dkh_321/article/details/78093788
随机推荐
- Rocket - diplomacy - enumerateBits
https://mp.weixin.qq.com/s/KsZqe9W_DM6W6JecK_irvA 介绍AddressSet.enumerateBits方法的实现,主要是x & (-x)的 ...
- cmd启动mysql,服务名无效
通过cmd无法启动mysql 解决办法: 在计算机管理(或者win+R,输入services.msc)中打开服务,查看mysql服务的名称是否正确. 键入正确的名称启动mysql.
- Shell脚本 （二） 变量与运算符
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 四.Shell 中的变量 1.系统变量 1.1 常用系统变量 $HOME. $PWD. $SHELL . ...
- SpringMVC（三）Restful风格及实例、参数的转换
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.Restful风格 1.Restful风格的介绍 Restful 一种软件架构风格.设计风格,而不是 ...
- Java实现 蓝桥杯VIP 算法提高 3-1课后习题2
算法提高 3-1课后习题2 时间限制:1.0s 内存限制:256.0MB 问题描述 编写一个程序,接受用户输入的10个整数,输出它们的和. 输出格式 要求用户的输出满足的格式. 例:输出1行,包含一个 ...
- Java实现 LeetCode 138 复制带随机指针的链表
138. 复制带随机指针的链表 给定一个链表,每个节点包含一个额外增加的随机指针,该指针可以指向链表中的任何节点或空节点. 要求返回这个链表的 深拷贝. 我们用一个由 n 个节点组成的链表来表示输入/ ...
- java算法集训结果填空题练习1
1 空瓶换汽水 浪费可耻,节约光荣.饮料店节日搞活动:不用付费,用3个某饮料的空瓶就可以换一瓶该饮料.刚好小明前两天买了2瓶该饮料喝完了,瓶子还在.他耍了个小聪明,向老板借了一个空瓶,凑成3个,换了一 ...
- Java实现 蓝桥杯 历届试题 横向打印二叉树
问题描述 二叉树可以用于排序.其原理很简单:对于一个排序二叉树添加新节点时,先与根节点比较,若小则交给左子树继续处理,否则交给右子树. 当遇到空子树时,则把该节点放入那个位置. 比如,10 8 5 7 ...
- java代码（8） ---guava字符串工具
guava字符串工具 一.Joiner 根据指定的分隔符把字符串连接在一起,MapJoiner执行相同的操作,但是针对Map的key和value 分析源码可知:该类构造方法被private修饰,无法直 ...
- 解Bug之路-记一次存储故障的排查过程
解Bug之路-记一次存储故障的排查过程 高可用真是一丝细节都不得马虎.平时跑的好好的系统,在相应硬件出现故障时就会引发出潜在的Bug.偏偏这些故障在应用层的表现稀奇古怪,很难让人联想到是硬件出了问题, ...