jquery学习

最新推荐文章于 2023-06-02 11:11:44 发布

KassadinSw

最新推荐文章于 2023-06-02 11:11:44 发布

阅读量396

点赞数 1

分类专栏：计算机基础教程

本文链接：https://blog.csdn.net/KassadinSw/article/details/77450057

版权

计算机基础教程专栏收录该内容

25 篇文章 1 订阅

订阅专栏

##jQuery介绍
是一个轻量级的js框架/库，其宗旨是write less do more。
##jQuery对象
js的对象叫做dom对象
使用jQuery框架产生的对象是jQuery对象，是对dom对象的包装。jQuery下的对象方法和dom对象方法不能混用，只能各用个的。
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$

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

jQuery中文手册
对象转换

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

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

查找操作对象

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

 层级选择器
$(".outer div")   //后代
$(".outer>div")   //子代
$(".outer+div")   //毗邻
$(".outer~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>

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

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

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

 表单属性选择器
:enabled
:disabled
:checked
:selected

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

查找筛选器
//查找子标签：
$("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()