jquery基本语法（一）

https://www.cnblogs.com/haiyan123/p/7657151.html

一、jQuery基础
1.为什么要用jquery？
    写起来简单，省事，开发效率高，兼容性好
2、什么是jQuery?
    jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）
3、如何使用jQuery？
    1、导入 <script src="jquery-3.2.1.js"></script>
           或者<script src="jquery-3.2.1.min.js"></script>
    2、语法规则：$("")
4、JS和jQuery的区别？
    jQuery就是用JS写的
    js是基础，jQuery是工具
5、jQuery介绍
    - 版本
      - 1.x
         兼容IE8。。。
      - 3.x
         最新
   - .min.xx
      压缩的：生产环境用
   - 没有压缩的（没有.min.xx）：开发用
6、 jQuery知识点
    　　html:裸体的人
    　　css:穿了衣服的人
   　　 JS：让人动起来
7、选择器：
   1、基本选择器
        - ID选择器                  $("#id的值")
        - 类选择器（class）          $(".class的值")
        - 标签选择器(html标签)       $("标签的名字")
        - 所有标签                  $("*")

- 组合选择器                $("xx,xxx")
   2、层级选择器
        - 从一个标签的子子孙孙去找    $("父亲子子孙孙")
        - 从一个标签的儿子里面找      $("父亲>儿子标签")
        - 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
        - 找后面所有同级的           $("标签~兄弟")

8、jQuery对象：
- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法

- DOM对象和jQuery对象转换：
- $(".c1")[0] --> DOM对象
- $(DOM对象)

9、筛选器
        - 写在引号里面的
            基本筛选器
            　　$(" :first")   找第一个
　　$(" :not('')") 不是/非
            　　$("#i1>input":not('.c1,.c2'))
            　　$(" :even")     偶数
            　　$(" :odd")      奇数
            　　$(" :eq(index)")       找等于index的
            　　$(" :gt(index)")       找大于index的
            　　$(" :lt(index)")       找小于index的
            　　$(" :last")     最后一个
            　　$(" :focus")    焦点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div>hello</div>

<a href="">click</a>

<p id="p1" alex="sb">pppp</p>

<p id="p2" alex="sb">pppp</p>

<div class="outer">outer

    <div class="inner">

        inner

        <p>inner p</p>

    </div>

    <p>alex</p>

</div>

<div class="outer2">Yuan</div>

<p>xialv</p>

<ul>

    <li>1111</li>

    <li>2222</li>

    <li>3333</li>

    <li>4444</li>

    <li>4444</li>

    <li>4444</li>

    <li>4444</li>

</ul>

<input type="text">

<input type="checkbox">

<input type="submit">

<script src="jquery-3.1.1.js"></script>

<script>

    //基本选择器

    //$("div").css("color","red")

    //$("*").css("color","red")

    //$("#p1").css("color","red")

    //$(".outer").css("color","red")

    // $(".inner,p,div").css("color","red")

    //层级选择器

    //$(".outer p").css("color","red")

    //$(".outer>p").css("color","red")

    //$(".outer+p").css("color","red")

    //$(".outer~p").css("color","red")

    //基本筛选器

    //$("li:first").css("color","red")

   // $("li:eq(0)").css("color","red")

    //$("li:gt(2)").css("color","red")

    //$("li:lt(2)").css("color","red")

    //属性选择器

    // $("[alex='sb'][id='p1']").css("color","red")

    //表单选择器

     //$("[type='text']").css("width","200px")

     //$(":text").css("width","400px")

</script>

</body>

</html>

选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<a href="">click</a>

<p id="p1" alex="sb">pppp</p>

<p id="p2" alex="sb">pppp</p>

<div class="outer">outer

    <div class="inner">

        inner

        <p>inner p</p>

    </div>

    <p>alex</p>

</div>

<div class="outer2">Yuan</div>

<p>xialv</p>

<ul>

    <li class="begin">1111</li>

    <li>2222</li>

    <li>3333</li>

    <li>4444</li>

    <li>4444</li>

    <li id="end">4444</li>

    <li>4444</li>

</ul>

<input type="text">

<input type="checkbox">

<input type="submit">

<script src="jquery-3.1.1.js"></script>

<script>

    //筛选器

    //$("li").eq(2).css("color","red");

    //$("li").first().css("color","red");

    //$("li").last().css("color","red");

    //查找筛选器

    //$(".outer").children("p").css("color","red");

    //$(".outer").find("p").css("color","red");

    //$("li").eq(2).next().css("color","red");

    //$("li").eq(2).nextAll().css("color","red");

    //$("li").eq(2).nextUntil("#end").css("color","red");

    //$("li").eq(4).prev().css("color","red");

    //$("li").eq(4).prevAll().css("color","red");

    //$("li").eq(4).prevUntil("li:eq(0)").css("color","red");

    //console.log($(".outer .inner p").parent().html())

   //$(".outer .inner p").parents().css("color","red");

   //$(".outer .inner p").parentsUntil("body").css("color","red");

    $(".outer").siblings().css("color","red")

</script>

</body>

</html>

筛选器

内容========== 　　

$(" .c1:contains('我是第一个')") 包含文档的内容的标签　　

$(" :empty") 标签内容为空的　　

$(" :has('')") 包含标签的标签　　

$(" :parent") 找有孩子的父亲　　

$("#i7").parent() 找i7的父亲

可见性======== 　　

$(" :hidden") 找到隐藏的　　

$(" :visible") 找不隐藏的，也就是显示的　　

属性========== 　　

input[name] --> 找有name属性的input 　　

input[type='password'] --> 类型是password的input标签

表单========== 　　

:input 　　

:password 　　

:checkbox 　　

:radio 　　

:submit 　　

:button 　　

:image 　　

:file
表单对象属性=========

:enable 可选的

:disable 不可选

:checked 选中的

:selected 下拉框选中

- 写在信号外面当方法用的

过滤===========

$("").first() 找第一个

$("").parent() 找父亲

$("").eq(index) 找等于index的

.hasClass() 判断有没有某个类的

查找

.children() 找孩子

.find() 查找

.next() 下面的

.nextAll() 下面所有的

.nextUntil() 找下面的直到找到某个标签为止
.parent() 找父亲

.parents() 找所有的父亲

.parentsUntil() 直到找到你要找的那个父亲为止

.prev() 上面的

.prevAll() 上面的所有

.prevUntil() 上面的直到找到某个标签为止
.siblings() 所有的兄弟

- toggleClass() 切换|开关：有就移除，没有就添加

- addClass("hide") 添加类

- removeClass("hide") 删除类

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .c1 {

            width: 200px;

            height: 200px;

            background-color: aqua;

        }

        .c2 {

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<button class="btn">click</button>

<script src="jquery-3.3.1.js"></script>

<script>

    $(".btn").on('click',function () {

        $(".c1").toggleClass("c2");

    });

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .outer{

            height: 1000px;

            width: 100%;

        }

        .menu{

            float: left;

            background-color: beige;

            width: 30%;

            height: 500px;

        }

        .content{

            float: left;

            background-color: rebeccapurple;

            width: 70%;

            height: 500px;

        }

        .title{

            background-color: aquamarine;

            line-height: 40px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="outer">

    <div class="menu">

        <div class="item">

            <div class="title" onclick="show(this)">菜单一</div>

            <div class="con">

                <div>111</div>

                <div>111</div>

                <div>111</div>

            </div>

        </div>

         <div class="item">

            <div class="title" onclick="show(this)">菜单二</div>

            <div class="con hide">

                <div>222</div>

                <div>222</div>

                <div>222</div>

            </div>

        </div>

         <div class="item">

            <div class="title" onclick="show(this)">菜单三</div>

            <div class="con hide">

                <div>333</div>

                <div>333</div>

                <div>333</div>

            </div>

        </div>

    </div>

    <div class="content"></div>

</div>

<script src="jquery-3.3.1.js"></script>

<script>

    function show(self) {

        $(self).next().removeClass("hide");

        $(self).parent().siblings().children(".con").addClass("hide");

    }

</script>

</body>

</html>

jquery基本语法（一）的更多相关文章

jQuery 基础语法
jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Aja ...
js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么一.总结一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
前端之JQuery：JQuery基本语法
jQuery基本语法一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似py ...
JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例复选框,综合案例随机图片
知识点梳理课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具插件:PageHelper (j ...
JQuery基本语法（部分）
1.jQuery介绍 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScrip ...
web前端----jQuery基础语法
一.jQuery基础1.为什么要用jquery? 写起来简单,省事,开发效率高,兼容性好2.什么是jQuery? jQuery是一个兼容多浏览器的JavaScript库(类似python里面的模块)3 ...
<学习笔记之 JQuery 基础语法>
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库. jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaSc ...
jQuery基本语法
jQuery 是 JavaScript 的一个函数库.方便.主流 jQuery的开发步骤: (1) 导入jQuery 库 (2) 在 <script src="../js/j ...
jQuery 选择器语法
jQuery选择器分为如下几类(点击“名称”会跳转到此方法的jQuery官方说明文档): 1. 基础选择器 Basics 名称说明举例 #id 根据元素Id选择 $("divId&quo ...

随机推荐

Flutter上拉加载下拉刷新---flutter_easyrefresh
前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...
python爬虫之Gerapy安装部署
原创北航大才:https://cuiqingcai.com/5006.html NULL:http://www.infosec-wiki.com/?p=432737
eclipse 基础快捷键。
批量修改:Alt+Shift+R 查看java源码:1.选中方法,比如System.out.println()的 println 2.F3 代码格式化:ctrl+shift+f (注意: 这个快捷键和 ...
How to enable usb on vbox
Device-->Install Guest Addition Shared Folders Settings-->Advanced-->Shared Clipboard--> ...
【python练习题】程序2
2.题目:企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40 ...
【数模】day06-数理统计I
数理统计. 以样本推断总体,进而用总体研究问题. 分两部分学习,第一部分是基础统计.参数估计.假设检验以及bootstrap方法. 1. 基础统计假设有如下数据: 要做频数表.直方图.折线图.饼状图 ...
Siki的虚幻第一季
空项目.一闪而过的解决方法命名空间std::cout的作用: int ,long , long long类型的范围 unsigned int 0-4294967295 int 21474 ...
BZOJ3790神奇项链——manacher+贪心
题目描述母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小写字母组成的字符串,每个小写字母表示一种颜色.为了制作这个项链,小 H 购买了两个机器.第一个机器可以生成所有形式 ...
吉哥系列故事――恨7不成妻 HDU - 4507 数位dp
思路和普通的DP不一样的是这里求的是满足条件的数的平方的和而数位DP只跟数每位是什么密切相关所以要开一个结构 (多加一个数的和sum 和平方和qsum)存一下各个状态的和的情况 dp[p ...
如何保证 spring-boot 和 spring-cloud版本一致
spring-boot 版本和 spring-cloud版本是一一对应的,很多错误都是由于版本不一致导致的.很多百度的东西太老了, 版本一升级就会出错. spring的jar包依赖关系是最难的,但聪 ...

jquery基本语法（一）

jquery基本语法（一）的更多相关文章

随机推荐

热门专题