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）的更多相关文章

  1. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  2. jQuery入门（2）使用jQuery操作元素的属性与样式

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  3. jQuery入门（3）事件与事件对象

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  4. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  5. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  6. jQuery入门必须掌握的一些API

    jQuery 中文版文档:http://www.css88.com/jqapi-1.9/category/ajax/ jQuery入门,必须掌握以下的API,平时工作中经常会用到.未列出的API,在掌 ...

  7. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  8. jquery(入门篇)无缝滚动

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 第一百六十二节，jQuery入门介绍

    jQuery入门 学习要点: 1.什么是  jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本  I ...

  10. jQuery入门--- 非常好

    jQuery入门------https://blog.csdn.net/dkh_321/article/details/78093788

随机推荐

  1. Java实现 LeetCode 748 最短完整词（字母拆分+暴力）

    748. 最短完整词 如果单词列表(words)中的一个单词包含牌照(licensePlate)中所有的字母,那么我们称之为完整词.在所有完整词中,最短的单词我们称之为最短完整词. 单词在匹配牌照中的 ...

  2. Java实现蓝桥杯模拟空地长草

    问题描述 小明有一块空地,他将这块空地划分为 n 行 m 列的小块,每行和每列的长度都为 1. 小明选了其中的一些小块空地,种上了草,其他小块仍然保持是空地. 这些草长得很快,每个月,草都会向外长出一 ...

  3. Java实现斐波那契数列的多种方法

    小编综合了很多算法相关的书籍以及其他,总结了几种求斐波那契数列的方法 PS:其中的第83行的递归法是求斐波那契数列的经典方法 public class 斐波那契数列 { //迭代法 public st ...

  4. java实现生日相同概率

    假设所有年份都只有365天,求n个人中,出现生日相同的概率. 输入n 输出相同的概率(保留3位有效数字即可) import java.util.*; public class X { // n个人出现 ...

  5. java实现第七届蓝桥杯打靶

    打靶 题目描述 小明参加X星球的打靶比赛. 比赛使用电子感应计分系统.其中有一局,小明得了96分. 这局小明共打了6发子弹,没有脱靶. 但望远镜看过去,只有3个弹孔. 显然,有些子弹准确地穿过了前边的 ...

  6. Mybatis缓存及延迟加载策略

    一:引言 通过前面几篇的文章介绍了Mybatis的一对一.一对多.多对多关系的配置及实现,可是大家发现了吗?在执行关联查询的时候,直接会把当前查询的主表里包含的副表也查询后封装到对象里,其实在实际开发 ...

  7. 第一章03-Activity的启动模式

    Activity的LaunchMode Android中提供了四中Activity的启动模式 1. standard 2. singleTop 3. singleTask 4. signleInsta ...

  8. ubuntu12.04 串口登录系统配置

    原文转自:http://blog.csdn.net/g__gle/article/details/8663239 1) Create a file called /etc/init/ttyS0.con ...

  9. 问题解决：psql: could not connect to server: No such file or directory Is the server running locally and accepting connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?

    错误提示: psql: could not connect to server: No such file or directory Is the server running locally and ...

  10. 使用VBS实现SSH远程登录并自动执行命令

    set ws=createobject("wscript.shell")ws.run "Putty所在路径\putty.exe -ssh -pw 你的密码 用户名@192 ...