前端基础--jquery

1.什么是jquery

［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2.什么是juery对象

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 对象$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jquery的基础语法：$(selector).action()

3.寻找元素

3.1选择器

3.1.1 基本选择器

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

3.1.2 层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

3.1.3 基本筛选器　　

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

3.1.4 属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

3.1.5 表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="jquery-3.1.1.js"></script>
</head>
<body><div egon="dog" alex="dog2">egon</div>
<div egon="dog">egon</div><div class="outer"><div class="c2"><div class="c3" id="d3">DIV</div></div><p id="d2" class="c3">PPPPPPP</p>
</div><input type="text"><div><p class="c1">p1</p><p class="c1"  id="d1">p2</p><p class="c1">p3</p><p class="c1">p4</p><p class="c1">p5</p><p class="c1" id="p6">p6</p>
</div><div><p>12321</p>
</div>
<p class="c1"> p7</p>
<script>// 基本选择器//$("#d1").css("color",'red')//$(".c1").css("color",'red')//$("p").css("color",'green')//    $("#d1,div").css("color",'green')// 组合选择器// $(".outer .c3").css("color",'red')// 筛选器// $(".c1:first").css("color",'red')// $(".c1:last").css("color",'red')// $(".c1:eq(i)").css("color",'red');// $(".c1:gt(1)").css("color",'red')// 属性选择器// $("[egon='dog'][alex]").css("color",'red')// 表单选择器  :只适用于表单标签// $("[type='text']").val("hello")// $(":text").val("hello")// 筛选器//    var i=3;//    $(".c1").eq(i).css("color",'red')//    console.log($("#d1").hasClass("c1"))  // true// 查找筛选器// 向下查找//$("#d1").nextAll().css("color",'red')//$("#d1").next().css("color",'red')//$("#d1").nextUntil("#p6").css("color",'red')// 向上查找//    $("#p5").prev();//    $("div").prevAll();//    $("div").prevUntil()// 查找所有的兄弟标签// $("#d1").siblings().css("color",'red')// find ：找后代      children:找儿子//    console.log($(".outer").children().length) ;// 2//    $(".outer").children(".c3").css("color","red")//    console.log($(".outer").find());//
    //    $(".outer").find(".c3").css("color","red")// 找父标签//    $("#d3").parent().parent();
//    $("#d3").parents();
//    $("#d3").parentsUntil(".outer")</script></body>
</html>

View Code

3.1.6.表单属性选择器

    :enabled:disabled:checked:selected

<body><form><input type="checkbox" value="123" checked><input type="checkbox" value="456" checked><select><option value="1">Flowers</option><option value="2" selected="selected">Gardens</option><option value="3" selected="selected">Trees</option><option value="3" selected="selected">Trees</option></select>
</form><script src="jquery.min.js"></script>
<script>// console.log($("input:checked").length);     // 2// console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
$("input:checked").each(function(){console.log($(this).val())})</script></body>

View Code

3.2筛选器

3.2.1 过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

3.2.2 查找筛选器　　

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

转载于:https://www.cnblogs.com/yxwang/p/7712363.html