jQuery中的api操作_api jquary-优快云博客

1、认识jQuery

jQuery函数 , jQuery的别 "$" , $也是一个函数.

         // $(function(){})

        // $ 是什么?  $ 是一个函数

        // console.log(typeof $);// 'function'

        // $ 是jQuery的别名?

        // window.jQuery = window.$ = jQuery;

        // console.log(jQuery === $);// true

2、文档遍历和操作

// 1）获取页面标签

// 2）设置标签的样式

// 3）设置标签的文本

// 4）设置标签的属性

// 5）删除标签、添加标签

1）获取页面标签

// 原生JS

  // var box = document.querySelector(".box")

  // console.log(box);//<div class="box">123</div>  这个东西我们叫做 dom对象

  // box.style["fontSize"] = "40px";

  // document.querySelector("#demo");

  // var items = document.querySelectorAll("ul li");

  // items[0].style["color"] = "red";

  // items[1].style["color"] = "green";

  // items[2].style["color"] = "blue";

// JQ 选择器函数 $()

 // 调用 $ 函数,传递一个选择器,就可以获取页面的标签

        // var $box = $(".box");

        // console.log($box);// ce.fn.init {0: div.box, length: 1}   这个东西我们叫做 jquery对象

        //$box.style["fontSize"] = "40px";// 报错

        // $box.css("fontSize","40px");// 正确



        //$("#demo") // 选择id叫做demo的标签

        //var $list = $("ul li");// 选择ul的所有后代li标签

        //console.log($list);// 把选择器对应的标签记录在jquery对象中

        //$list.eq(0).css("color","red");// 设置第一个li标签的字体为红色

        //$list.eq(1).css("color","green");// 设置第二个li标签的字体为绿色

        //$list.eq(2).css("color","blue");// 设置第三个li标签的字体为蓝色

// $ 既可以作为初始化函数(入口函数),也可以作为选择器函数使用

// $(function(){}) // 这是初始化函数

// $(".box") // 这是获取页面标签的意思作为选择器函数使用

// 文档遍历

// 获取目标元素的所有子元素

        // var $child = $(".list").children();

        // console.log($child);

// 获取目标元素的父元素

        // var $parent = $(".aaa").parent();

        // console.log($parent);

// 获取目标元素的兄弟元素

        // var $bro = $(".aaa").siblings();

        // console.log($bro);

// 获取目标元素相邻的下一个元素

        // var $next = $(".aaa").next();

        // console.log($next);

// 获取目标元素相邻的上一个元素

        // var $prev = $(".aaa").prev();

        // console.log($prev);

// 找到ul标签下的.aaa标签

        // var $aaa = $(".list").find(".aaa");

        // console.log($aaa);

2）设置标签的样式

// 问题: 为什么不用循环li标签数组就可以给所有li标签设置字体颜色?

// 回答: 在封装css方法的过程中已经循环了,叫做内部循环, 隐式迭代

// 写法1:

        // $("ul li").css("color","red");

// 写法2:

        // $(".box").css({width:100,height: 100,backgroundColor:"blue"})

3）设置标签的文本

// 纯文本
        // $("#demo").text("abc");

        // $("#demo").text("<span>abc</span>");

// 超文本
        // $("#demo").html("abc");

        // $("#demo").html("<span>abc</span>");

        $("#demo").html("<i>abc</i>");//可以用于渲染html字符串

// 不传递参数,表示获取该标签的超文本
        // var v2 = $("#demo").html();

        // console.log(v2);// '<i>abc</i>'

// 获取输入框的值
        // var v1 = $("input").val();

        // console.log(v1);// 'hello'

4）设置标签的属性

// class  id  src   title  href

        var s1 = "https://gw.alicdn.com/imgextra/i3/O1CN01uRz3de23mzWofmPYX_!!6000000007299-2-tps-143-59.png"

        var s2 = "https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png"

        $(".picture").attr("src", s2);// 设置标签属性

        var v3 = $(".picture").attr("src");// 获取标签属性

        // console.log(v3);// 'https://img10.360buyimg.com/img/jfs/t1/192028/25/33459/5661/63fc2af2F1f6ae1b6/d0e4fdc2f126cbf5.png'

        // $(".picture").removeAttr("src");// 删除标签属性

5）删除标签、添加标签

// 往目标元素的尾部追加渲染字符串

        $(".box").append("<h3 class='tit1'>7</h3>");

        $(".box").append("<h3>8</h3>");

        $(".box").append("<h3>9</h3>").css("color","red");// 链式编程

// 往目标元素的首位添加渲染字符串

        // $(".box").prepend("<h3>7</h3>");

        // $(".box").prepend("<h3>8</h3>");

        // $(".box").prepend("<h3>9</h3>");

// 删除标签

        // $(".tit1").remove();

        // $(".box").html("");

        // $(".box").empty();

// 总结:

// 学习jquery里面的api, 可以从四个要素着手

// 1. 调用者 (往往是jQuery对象)

// 2. 参数

// 3. 返回值

// 4. 功能