jquery入门(1）
2019-12-19 本文已影响0人
螺钉课堂
1.jQuery简介
jQuery是一个快速、简洁的JavaScript框架,倡导写更少的代码，做更多的事情
#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 开始计数
