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
随机推荐
- MySQL国内镜像下载地址
最近重新下载MySQL发现官网下载速度不是一般的慢,官网下载要几个钟而且一不注意就被取消下载了,实在受不了 可以使用sohu的镜像:http://mirrors.sohu.com/mysql/MySQ ...
- Java实现 蓝桥杯VIP 算法提高 5-3日历
算法提高 5-3日历 时间限制:1.0s 内存限制:256.0MB 问题描述 已知2007年1月1日为星期一.设计一函数按照下述格式打印2007年以后(含)某年某月的日历,2007年以前的拒绝打印.为 ...
- Java实现 LeetCode 173 二叉搜索树迭代器
173. 二叉搜索树迭代器 实现一个二叉搜索树迭代器.你将使用二叉搜索树的根节点初始化迭代器. 调用 next() 将返回二叉搜索树中的下一个最小的数. 示例: BSTIterator iterato ...
- Java中map.getOrDefault()方法的使用
Map.getOrDefault(Object key, V defaultValue)方法的作用是: 当Map集合中有这个key时,就使用这个key值: 如果没有就使用默认值defaultV ...
- java实现第三届蓝桥杯方块填数
方块填数 "数独"是当下炙手可热的智力游戏.一般认为它的起源是"拉丁方块",是大数学家欧拉于1783年发明的. 如图[1.jpg]所示:6x6的小格被分为6个部 ...
- Linux脚本安装包
脚本安装包 并不是独立的软件安装包类型,常见安装的是源码包,是人为把安装过程写成了自动安装的脚本,只要执行脚本,定义简答的参数,就可以实现安装,非常类似于Windows下软件的安装方式. 安装过程(安 ...
- install-package : 由于无法加载项目 mydemo 的详细信息，操作失败
安装nuget package包提示错误 install-package : 由于无法加载项目 mydemo 的详细信息,操作失败 解决方法 项目用dotnet cli 命令dotnet new mv ...
- Oracle 11g RAC之HAIP相关问题总结
1 文档概要 2 禁用/启用HAIP 2.1 禁用/启用HAIP资源 2.2 修改ASM资源的依赖关系 3 修改cluster_interconnects参数 3.1 使用grid用户修改ASM实例的 ...
- 华为EMUI在service中不能打印debug级别的日志
华为emui在service里面不能打印debug级别的日志,因为这个小问题调试了一上午,刚开始我还以为emui把系统service的启动流程都改了呢
- 对Activity启动模式的理解
对Activity启动模式的理解 应用场景 在已打开多个Activity应用B的前提下,应用A调用应用B后点击返回按钮,需要直接返回到A应用,而不是打开B应用的上一个Activity 一个Task可以 ...