DAY60 jQuery基础1

最新推荐文章于 2024-07-04 20:19:39 发布
最新推荐文章于 2024-07-04 20:19:39 发布
阅读量263 收藏
点赞数
分类专栏： 学习笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gavin3318/article/details/77175435
版权

jQuery介绍

是一个轻量级的js框架/库，其宗旨是write less do more。

jQuery对象

js的对象叫做dom对象

使用jQuery框架产生的对象是jQuery对象，是对dom对象的包装。jQuery下的对象方法和dom对象方法不能混用，只能各用个的。

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$

//基本语法
$(selector).action()      //即选择器选择生成对象，对象调用方法

jQuery中文手册：http://jquery.cuishifeng.cn/

对象转换

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]    jquery对象按索引取出来的是dom对象，如：     
　　$("#msg").html()
　　$("#msg")[0].innerHTML

查找操作对象

* 选择器*

查找要操作的标签，生成jquery对象
* 基本选择器*

$("*")
$("#id")
$(".class")
$("element")
$(".class,p,div")

基本选择器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p id="p1">PPP</p>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<span class="d1">SPAN</span>
<span class="c2">SPAN</span>
<a href="">AAAA</a>

<script src="jquery-3.2.1.js"></script> //导入jquery文件
<script>
    //    基本选择器
    $("#p1").css("color","red") //按照id选择
    $(".d1").css({"color":"green","fontSize":"50px"}) //按照class选择
    $("div").css({"color":"yellow","fontSize":"35px"}) //按照标签名div选择
    //$("*").css({"color":"blue","fontSize":"30px"}) //body下的所有标签
    $(".c2,a").css({"color":"gray","fontSize":"30px"}) //多个条件用空格隔开


</script>
</body>
</html>

基本选择器示例

注意，获取的jquery对象是一个集合，jquery对象在做方法调用进行属性操作的时候，会把集合里的所有元素都循环一次执行

层级选择器

$(".outer div")   //后代
$(".outer>div")   //子代
$(".outer+div")   //毗邻
$(".outer~div")   //普通兄弟

同css组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>p6</p>
<div class="outer">
    <div class="inner">
        <p>p3</p>
        <div>DIV</div>
    </div>
    <p>p2</p>
</div>
<p>p1</p>
<p>p4</p>

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>

    $(".outer p").css("color","red")   //后代
    //$(".outer>p").css("color","red")     //子代
    //$(".outer+p").css("color","red")       //毗邻
    //$(".outer~p").css("color","red")       //普通兄弟，向下不向上

</script>

</body>
</html>

层级选择器示例

* 属性选择器*

$('[id]')    //属性名
$('[id="div1"]')    //一整条属性
$('["bob="man"][id]')    //多条属性

属性选择器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div bob="man">bob1</div>
<div bob="man" class="c1">bob2</div>
<div bob="man2">bob3</div>

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>
    // ==================属性选择器

     $("[bob]").css("color","red")
//     $("[bob='man']").css("color","red")
//     $("[bob='man'][class]").css("color","red")

</script>

</body>
</html>

属性选择器示例

* 表单选择器*

只针对input表单，按照类型选择

$("[type='text']")
$(":text")    //简写     
$("input:checked").hide();    //hide()方法，隐藏元素
//以上选择器只适用于input标签，input:checked只能用于单选框和复选框

表单选择器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text">
<input type="text">
<input type="text" >
<input type="checkbox"  checked="checked">

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>
    //  针对input表单
    $("[type='text']").css("border","1px solid red");
    $("input:checked").hide();
    //$(":text").css("border","1px solid green");

</script>

</body>
</html>

表单选择器示例

筛选器

* 基本筛选器*

$("li:first")      //按索引取第一个
$("li:eq(2)")    //按索引取第三个
$("li:even")     //取偶数
$("li:odd")     //取偶数
$("li:gt(1)")    //大于索引1，也有lt小于

基本筛选器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul class="box">
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>
</ul>

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>

//    $("li:first").css("color","red");
//    $("li:odd").css("color","red");
//    $("li:even").css("color","red");
//    $("li:eq(3)").css("color","red");
//    $("li:gt(1)").css("color","red");
    $("li:gt(1):lt(3)").css("color","red"); //链式语法，前面的大于1的结果然后在结果上再小于3

</script>

</body>
</html>

基本删选器示例

* 过滤筛选器*
推荐的筛选器写法，可用于传变量

$("li").eq(2)  
$("li").first()  
$("ul li").hasClass("test")　　//判断是否存在class为test的元素

过滤删选器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul class="box">
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
    <li class="item">666</li>
</ul>

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>
    var $x=3
    $("ul li").eq($x).css("color","red");
    console.log($("ul li").hasClass('item'));
</script>
</body>
</html>

过滤删选器示例

* 查找筛选器*

//查找子标签：
$("div").children(".test")
$("div").find(".test")      

//向下查找兄弟标签：    
$(".test").next()               
$(".test").nextAll()    
$(".test").nextUntil()

//向上查找兄弟标签：    
$("div").prev()                  
$("div").prevAll()       
$("div").prevUntil()   

//查找所有兄弟标签：    
$("div").siblings()  

//查找父标签：         
$(".test").parent()              
$(".test").parents()     
$(".test").parentUntil()

操作元素（属性、css、文档处理）

事件

* 事件绑定*

jquery_obj集合.事件（function(){})

事件绑定示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="box">
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
</ul>

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>

     $(".item").click(function () {
         alert($(this).index())
     });

</script>
</body>
</html>

事件绑定示例

* 事件委派*
在原有标签基础上，后边添加的标签，继承原有标签的事件

jquery_obj集合.on(事件,[selector],[data],function)

事件委派示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="box">
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
</ul>

<button class="add">ADD</button>

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>
     $(".item").click(function () {
         alert($(this).index())
     });

    //  on方法
    $("#box").on("click",".item",function () {
    //  alert($(this).html());
        alert($(this).index());
    });

    //添加一个标签，点击该标签显示索引
     $(".add").click(function () {
         $("#box").append("<div class='item'>666</div>")
     });

</script>
</body>
</html>

事件委派示例

事件委派清除
清除标签绑定的事件
语法

jquery_obj集合.off(事件)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<ul id="box">
    <li class="item">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item">444</li>
    <li class="item">555</li>
</ul>

<button class="add">ADD</button>
<button class="releave">off</button>

<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>

    $("#box").on("click",".item",function () {
        alert($(this).index());
    });

     $(".add").click(function () {
         $("#box").append("<div class='item'>666</div>")
     });

    $(".releave").click(function () {
        //绑定给那个对象就解除哪个对象的事件委派
       $("#box").off("click")
    });

</script>
</body>
</html>

事件委派清除

* 事件切换*
hover事件

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .test{
            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>


<div class="test"></div>


<script src="../2017.8.14/jquery-3.2.1.js"></script>
<script>
    function enter(){
        alert("enter")
    }
    function out(){
        alert("out")
    }
    $(".test").hover(enter,out)


//    $(".test").mouseenter(function(){
//        alert("enter")
//    });

//    $(".test").mouseleave(function(){
//        alert("leave")
//    });

</script>
</body>

</html>

hover示例
苹果切一半
关注
专栏目录
Day 44 jQuery基础
day——01
11-25 71
一、jQuery介绍 1). JavaScript与jQuery比较 js:入口函数只有一个,window.onload 浏览器兼容性:非常令人心疼,比如textContent虽然作为标准方法但是只支持IE8+以上的 浏览器 DOM错综复杂,实现简单的效果很麻烦 代码容错性差,出错后导致后面的代码不执行 jQuery:市场占有率稳步上升,代码比较少,...
day026 jQuery基础入门
MustangYL的博客
04-01 116
1 案例1-定时弹广告 1.1 需求 当页面加载1秒后,显示一个广告图,广告图显示2秒后,隐藏广告图; 1.2 技术分析 1:由于使用js的代码太繁琐,因此我们使用js的工具类解决这个案例的效果; 2:当页面加载的时候,需要使用事件解决页面加载时机问题; 3:涉及到1秒做xxx,2秒做xxx,需要使用定时器实现; 4:让图片显示或隐藏; 1.3 Js的工具类-jQuery Jquery就是js的一个小框架,jquery的宗旨:写的更少,做的更多; 1.4 Jquery的作用 可以让程序
jQuery基础-day1
weixin_45720751的博客
12-13 159
jQuery是JavaScript和查询Query，辅助JS开发的js类库 $是jQuery的核心函数，能完成jQuery的很多功能 传入参数为函数时，表示页面加载完成之后，相当于window.onload = function(){} 传入参数为html字符串时，会对我们创建这个Html标签对象 传入参数为选择器字符串时： $("#id属性值") id选择器，根据id查询标签对象 $(“标签名”) 标签名选择器,根据指定的标签名查询标签对象 $(".class属性值") 类型选择器，可以根据class属性
jQuery基础自学笔记DAY1
qq_30987517的博客
04-11 827
jQuery基础自学笔记 第一天入口函数及选择器 文章目录jQuery基础自学笔记一、jQuery入口函数二、jQuery对象和DOM对象2.1 DOM对象：原生js获取过来的对象就是DOM对象2.2 jQuery对象：用jQuery方式获取过来的对象就jQuery对象。2.3 jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法2.4 jQuery对象和DOM对象相互转换2.4.1 DOM对象转换为jQuery对象：$(DOM对象)2.4.2 jQuery对象转
day20_JQuery基础笔记
weixin_40232131的博客
09-19 111
今日内容 1. JQuery 基础： 1. 概念 2. 快速入门 3. JQuery对象和JS对象区别与转换 4. 选择器 5. DOM操作 6. 案例 JQuery 基础： 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框...
day37 jQuery基础
weixin_46311092的博客
05-20 122
什么是jQuery 1、jQuery是一个JavaScript函数库。 2、jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。 jQuery语法 基础语法 1、美元符号定义 jQuery 2、选择符（selector）“查询"和"查找” HTML 元素 3、jQuery 的 action() 执行对元素的操作。 $(docu
jQuery-Day1
最新发布
2401_84418883的博客
07-04 376
因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。滑入滑出动画，常见有三个方法：slideDown() / slideUp() / slideToggle();简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $。
Day21-Jquery基础
欢迎来到Liu_zimo的博客
10-15 270
title: Day21-Jquery基础 date: 2020-08-06 19:18:45 author:子陌 JQuery基础： 概念 一个JavaScript框架。简化js的书写，封装了js常用的代码功能，提供简便使用JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互 JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已。 <!DOCTYPE html> <html lang="en"> <head> .
JQuery基础-DAY1
dichu0602的博客
08-14 191
jQuery介绍 是一个轻量级的js框架/库，其宗旨是write less do more。 jQuery对象 js的对象叫做dom对象 使用jQuery框架产生的对象是jQuery对象，是对dom对象的包装。jQuery下的对象方法和dom对象方法不能混用，只能各用个的。 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$ //基本...
day20_JQuery基础教案1
08-08
在本节"Day20_JQuery基础教案1"中，我们深入学习了jQuery的基本概念、快速入门以及jQuery对象与JavaScript对象的区别与转换。以下是详细的知识点解析： **jQuery概念** jQuery是一个JavaScript框架，旨在简化...
day20_JQuery基础.zip
02-20
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装...
day37【JQuery基础】.pdf
05-30
jQuery主要分为三个版本：1.x版本、2.x版本和3.x版本。1.x版本兼容旧版的Internet Explorer浏览器，而2.x版本不兼容，3.x版本则只支持最新的浏览器。开发者需要根据实际项目兼容性需求，选择合适的jQuery版本。通常...
day20 jquery01.zip
11-18
学习这些基础知识将有助于理解jQuery如何提升开发效率，以及如何利用它构建动态且用户友好的Web应用。通过实践和深入学习，你可以掌握更多的高级特性，比如插件开发、性能优化等，从而成为jQuery的熟练使用者。
Django：popup弹出框简单应用实例
So begins a new age of knowledge
10-24 7117
效果：在p1.html页面点击，弹出p2的弹出框，填写数据，在 popup_response页面处理数据1、视图函数：views.pyfrom django.shortcuts import renderdef p1(request): return render(request,"p1.html")def p2(request): if request.method == "GET
Django知识点汇总
So begins a new age of knowledge
10-17 3551
Django知识点汇总 目录 一、wsgi接口 二、中间件 三、URL路由系统 四、Template模板 五、Views视图 六、Model&ORM 七、Admin相关 八、Http协议 九、COOKIE 与 SESSION 十、Django的用户认证 十一、From与ModelForm 十二、分页 十三、缓存 十四、信号 十五、序列化 十六、Ajax 十七、数
DAY64 Django基础1
So begins a new age of knowledge
08-21 809
web框架概念框架，即framework，特指为解决一个开放性问题而设计的具有一定约束性的支撑结构，使用框架可以帮你快速开发特定的系统。对于所有的Web应用，本质上其实就是一个socket服务端，用户的浏览器其实就是一个socket客户端。import socketdef handle_request(client): buf = client.recv(1024) client.se
DAY 48 HTML基础1
So begins a new age of knowledge
08-02 737
HTML基础Web的本质就是利用浏览器访问socket服务端，socket服务端收到请求回复数据提供给浏览器进行渲染显示。import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8081)) #通过浏览器访问该绑定端口
DAY50 CSS基础2
So begins a new age of knowledge
08-07 586
CSS属性操作-文本文本颜色<head> <style> p{ /*color:#8B5742 ;色码表*/ color: RGBA(255,0,0,0.5); /*调色，红绿蓝透明度*/ /*color: blue;颜色名*/ } </style> </head>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值