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 540 有序数组中的单一元素（位运算入门）
540. 有序数组中的单一元素给定一个只包含整数的有序数组,每个元素都会出现两次,唯有一个数只会出现一次,找出这个数. 示例 1: 输入: [1,1,2,3,3,4,4,8,8] 输出: 2 示例 ...
Java中Iterator 和ListIterator的区别
1.Iterator Iterator的定义如下: public interface Iterator {} Iterator是一个接口,它是集合的迭代器.集合可以通过Iterator去遍历集合中的元 ...
Java实现 LeetCode 23 合并K个排序链表
23. 合并K个排序链表合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [ 1->4->5, 1->3->4, 2->6 ] 输 ...
Maven发布Release到中心仓库历程记录（无个人域名）
Maven发布Release到中心仓库历程记录(无个人域名) 前言因为前段时间自己做了一个爬虫项目(地址),自己很希望分享到maven中心仓库上,感觉拥有自己的jar包令我兴奋,便开始了maven发 ...
Linux创建与删除
一.创建文件夹.文本.用户.组 mkdir 创建文件夹 touch 创建文本 useradd 创建用户例1:创建一个文件夹xiaomi 创建文件夹:mkdir xiaomi 例2:创建一个文件如ad ...
Python中map和reduce函数
①从参数方面来讲: map()函数: map()包含两个参数,第一个是参数是一个函数,第二个是序列(列表或元组).其中,函数(即map的第一个参数位置的函数)可以接收一个或多个参数. reduce() ...
Flask 的 session
Flask 的 session @app.route("/", ) def index(): # 如何设置sessoion # 1 导入session # 2 给sessoion设 ...
<Android> Location Service 分析
由于各种原因,老师希望我学习Android系统源码以应对可能参与的项目.我只好深入曹营,刺探军情了. 定位服务是手机上最常用的功能之一,据说也是相对比较简单的服务,所以从这里入手.其他系统服务的架构都 ...
IAT表
0X0 0 DLL介绍 DLL翻译器为动态链接库,原来不存在DLL的概念只有,库的概念,编译器会把从库中获取的二进制代码插入到应用程序中.在现在windows操作系统使用了数量庞大的库函数(进程,内存 ...
快捷键浏览存储过程的内容（执行文中的User Store Proc，设置快捷方式的指向usp_Name）
虽然不常用,但使用时还是在用传统方法查看存储过程的内容, sp_helptext usp_Name;下面这段执行后可设置快捷查询usp的内容(但是需要在每个数据库下都存在,不能直接在master,并且 ...

jquery入门(1）