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

posted @ 2019-12-13 10:12  螺钉课堂Nodeing-com  阅读(125)  评论(0)    收藏  举报