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
随机推荐
- Java实现 LeetCode 804 唯一摩尔斯密码词 （暴力）
804. 唯一摩尔斯密码词 国际摩尔斯密码定义一种标准编码方式,将每个字母对应于一个由一系列点和短线组成的字符串, 比如: "a" 对应 ".-", " ...
- Java实现 LeetCode 692 前K个高频单词（map的应用）
692. 前K个高频单词 给一非空的单词列表,返回前 k 个出现次数最多的单词. 返回的答案应该按单词出现频率由高到低排序.如果不同的单词有相同出现频率,按字母顺序排序. 示例 1: 输入: [&qu ...
- Java实现 LeetCode 47 全排列 II（二）
47. 全排列 II 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ] class Solut ...
- Java实现旅行商问题
1 问题描述 何为旅行商问题?按照非专业的说法,这个问题要求找出一条n个给定的城市间的最短路径,使我们在回到触发的城市之前,对每个城市都只访问一次.这样该问题就可以表述为求一个图的最短哈密顿回路的问题 ...
- java实现汉诺塔计数
** 汉诺塔计数** 汉诺塔(又称河内塔)问题是源于印度一个古老传说的益智玩具. 大梵天创造世界的时候做了三根金刚石柱子,在一根柱子上从下往上按照大小顺序摞着64片黄金圆盘.大梵天命令婆罗门把圆盘从下 ...
- python IDE pycharm的安装与使用
Python开发最牛逼的IDE——pycharm (其实其它的工具,例如eclipse也可以写,只不过比较麻烦,需要安装很多的插件,所以说pycharm是最牛逼的) pycharm,下载专业版的,不要 ...
- python基础：如何使用 pip 安装第三方库
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 在这个生活中处处都是大数据和人工智能的时代,总是能在各种角落看到 Pyth ...
- Dos命令提示符下 - 用sqlcmd执行*.sql语句
Dos命令提示符下 - 用sqlcmd执行*.sql语句 1)在Dos命令下执行sqlcmd命令(当然事先需要将sqlcmd增加到环境变量中去), 2)下面白色部分替换为服务器名或计算机名即可sqlc ...
- 入门springMVC
前言 开始学习springMVC整理的笔记,今天这一篇是回顾第一个springMVC程序. 环境 大致文件结构 先是要创建好一个普通maven工程,加入一些servlet包以及mvc支持的jar包,如 ...
- TensorFlow从0到1之矩阵基本操作及其实现（7）
矩阵运算,例如执行乘法.加法和减法,是任何神经网络中信号传播的重要操作.通常在计算中需要随机矩阵.零矩阵.一矩阵或者单位矩阵. 本节将告诉你如何获得不同类型的矩阵,以及如何对它们进行不同的矩阵处理操作 ...