Jquery
Posted 070727sun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery相关的知识，希望对你有一定的参考价值。
一、Jquery是什么？
jQuery是一个快速的，简洁的javascript库，使用户能更方便地处理html documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
二、什么是Jquery对象
- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
比如：
$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
基本语法：$(selector).action()
三、选择器和筛选器
选择器：
基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器 $(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
基本筛选器 $("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器 $(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)
表单选择器 $("[type=‘text‘]")----->$(":text") 注意只适用于input标签
$("input:checked")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.1.js"></script> </head> <body> <div>Jquery <p>QQQQ</p> <div id="U">UUUU</div> </div> <p>EEEE</p> <div>JJJJ <div>YYYY1</div> <p class="R">RRRR</p> <div id="Y">YYYY2</div> <p>BBBB2</p> </div> <div class="R">AAAA1</div> <div class="R" query="Jquery">AAAA2</div> <input type="text"> <input type="button"> <script> /*基础选择器*/ // $("*").css("color","red"); // $("#U").css("color","red"); // $(".R").css("color","red"); // $("p").css("color","red"); // $("#U,.R,P").css("color","red"); /* 层级选择器 */ // $("div p").css("color","red"); // $("div>p").css("color","red"); // div里的所有p标签 // $("div+p").css("color","red"); // 对于同级div紧跟着的p标签 // $("div~p").css("color","red"); /* 基本筛选器 */ // $("div:first").css("color","red"); //第一层div // $("div:eq(2)").css("color","red"); //第三级 div // $("div:even").css("color","red"); //基数层 // $("div:gt(3)").css("color","red"); /* 属性筛选器 */ // $(‘[query="Jquery"]‘).css("color","red"); // $(‘[class="R"]‘).css("color","red"); /* 表单选择器 */ // $("[type=‘text‘]").css("background","red"); //只适用于input标签 </script> </body> </html>
筛选器：
过滤筛选器 $("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器
$("div").children(".test") $("div").find(".test")
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents() $(".test").parentUntil()
$("div").siblings()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery_demo2</title> <script src="jquery-3.4.1.js"></script> </head> <body> <div>hello <div class="div">hello2</div> <div>hello3</div> <div class="div1">hello4 <div class="div3">hello5</div> <div class="div4">hello5</div> <div class="div5">hello5</div> <div id="test">hello6</div> <div class="div2">hello7 <p>hello9</p> <div id="parents">parents</div> </div> <p>hello8</p> </div> </div> <p>hello word</p> </body> <script> // $("div").eq(3).css("color","red"); // $("div").first().css("color","red"); // alert($("div").hasClass("class")); //判断div标签下面class是否有"cls"。会返回布尔值 // $(".div1").children("#test").css("color","red"); // $(".div1").find(".div2").css("color","red"); // $(".div").next().css("color","red"); // $(".div").nextAll().css("color","red"); // $(".div").nextUntil(".div1").css("color","red"); //从.div渲染到.div2 nextUntil 表示一段区间的渲染 // $(".div2").prev().css("color","red"); //prev表示前一个元素 // $(".div2").prevAll().css("color","red"); //表示元素前的所有同级元素 // $(".div2").prevUntil(".div3").css("color","red"); // 向上一段空间的渲染 // $("#test").parent().css("color","red"); // 父级元素的渲染 // $("#parents").parents().css("color","red"); // 渲染所有元素，会查找到根 // $("#parents").parentsUntil(".div1").css("color","red"); // 渲染#parents向上到.div1 // $("#parents").parentsUntil(".div1").find(‘p‘).css("color","red"); //渲染#parents向上到.div1中查找p元素 // $("#test").siblings().css("color","red"); //兄弟元素 </script> </html>
以上是关于Jquery的主要内容，如果未能解决你的问题，请参考以下文章