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 高级—— 锁机制
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.锁的概述 1.锁的定义锁是计算机协调多个进程或线程并发访问某一资源的机制. 在数据库中,除传统的计 ...
（Java实现）洛谷 P1028 数的计算
题目描述我们要求找出具有下列性质数的个数(包含输入的自然数nn): 先输入一个自然数n(n≤1000),然后对此自然数按照如下方法进行处理: 不作任何处理; 在它的左边加上一个自然数,但该自然数不能 ...
Java实现蓝桥杯算法提高新建Microsoft world文档
算法提高新建Microsoft Word文档时间限制:1.0s 内存限制:256.0MB 问题描述 L正在出题,新建了一个word文档,想不好取什么名字,身旁一人惊问:"你出的题目叫&l ...
Java实现蓝桥杯算法训练数字游戏
试题算法训练数字游戏资源限制时间限制:1.0s 内存限制:256.0MB 问题描述给定一个1-N的排列a[i],每次将相邻两个数相加,得到新序列,再对新序列重复这样的操作,显然每次得到的序列 ...
Java实现蓝桥杯VIP 算法提高字符串比较
算法提高字符串比较时间限制:1.0s 内存限制:512.0MB 独立实现标准字符串库的strcmp函数,即字符串比较函数,从键盘输入两个字符串,按字典序比较大小,前者大于后者输出1,前者小于后者输 ...
Java实现洛谷 P1035 级数求和
import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner in = ...
借Adobe XD之力，自动生成Flutter代码
概述今天,我们来聊聊一个专门为"懒人程序员"准备的工具--Adobe XD.使用它可以快速将原型设计图转换为可执行的Flutter代码, 而由于Flutter自身跨平台的特性,因 ...
Yangcs从简书搬回来了
追求更加畅快淋漓的书写体验: 简书地址: http://www.jianshu.com/users/9913981cb400/latest_articles. Yangcs在简书[2016] 简书已经 ...
关于Graph Convolutional Network的初步理解
为给之后关于图卷积网络的科研做知识积累,这里写一篇关于GCN基本理解的博客.GCN的本质是一个图网络中,特征信息的交互+与传播.这里的图指的不是图片,而是数据结构中的图,图卷积网络的应用非常广泛 ,经 ...
linux下解决vim打开文件乱码现象
用VIM打开一个文件进行编辑时最下面的任务栏出现中文乱码,严重影响编写代码. 因为VIM默认的语言支持不行, 修改~/.vimrc 文件或/etc/vimrc 文件,添加一下代码: set encod ...

jquery入门(1）