jquery学习-1

来源：互联网发布：手机淘宝排名提升编辑：程序博客网时间：2024/06/04 23:18

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()

阅读全文

1 0