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
随机推荐
- Go 语言入门教程：安装
关注公众号:雨哥写 python. 学习 Go 语言,比较下和 python 的用法,争取对 python 有更深的理解. 为什么学 Go 我主要使用 python 语言,其他语言用得不多,希望学一门 ...
- Linux (四) 基础命令 下
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.查看文件内容 1.命令 cat 对应单词:concatenate 作用:查看文件内容 常用参数: ...
- Java实现 LeetCode 797 所有可能的路径 （DFS）
797. 所有可能的路径 给一个有 n 个结点的有向无环图,找到所有从 0 到 n-1 的路径并输出(不要求按顺序) 二维数组的第 i 个数组中的单元都表示有向图中 i 号结点所能到达的下一些结点(译 ...
- （Java实现） 蓝桥杯 国赛 重复模式
标题:重复模式 作为 drd 的好朋友,技术男 atm 在 drd 生日时送给他一个超长字符串 S .atm 要 drd 在其中找出一个最长的字符串 T ,使得 T 在 S 中至少出现了两次,而他想说 ...
- Java实现 LeetCode 558 四叉树交集（四叉树，第一次遇到，研究了半天）
558. 四叉树交集 四叉树是一种树数据,其中每个结点恰好有四个子结点:topLeft.topRight.bottomLeft 和 bottomRight.四叉树通常被用来划分一个二维空间,递归地将其 ...
- java实现第三届蓝桥杯源码变换
源码变换 这道题因为有一些html语言在编写的时候不会显示出来,所以就用代码格式把题目写出来 [编程题](满分22分) 超文本标记语言(即HTML),是用于描述网页文档的一种标记语言. HTML通过文 ...
- 【String注解驱动开发】如何按照条件向Spring容器中注册bean？这次我懂了！！
写在前面 当bean是单实例,并且没有设置懒加载时,Spring容器启动时,就会实例化bean,并将bean注册到IOC容器中,以后每次从IOC容器中获取bean时,直接返回IOC容器中的bean,不 ...
- JDK Base64编解码1.7和1.8的坑
场景 对接一个第三方api接口,其中签名部分用的是JDK8的编码.我们线上采用JDK7,导致项目无法编译 替换编解码部分为1.7的代码,然后签名又不对 所以坑就在这里,结论,1.7的编解码有换行符导致 ...
- 记录一次vue 访问空白的排错
访问vue项目页面空白 场景 内网访问访问url很快就可以打开页面,外网访问一片浏览器端一片空白 排查思路 [x] 由于不熟悉vue 先看了nginx的配置,以为是nginx的配置导致的 [x] 百度 ...
- CentOS7.5搭建ES6.2.4集群与简单测试
一 简介 Elasticsearch是一个高度可扩展的开源全文搜索和分析引擎.它允许您快速,近实时地存储,搜索和分析大量数据.它通常用作支持具有复杂搜索功能和需求的应用程序的底层引擎/技术. 下载地址 ...