1、认识jQuery
jQuery函数 , jQuery的别 "$" , $也是一个函数.
// $(function(){})// $ 是什么? $ 是一个函数// console.log(typeof $);// 'function'// $ 是jQuery的别名?// window.jQuery = window.$ = jQuery;// console.log(jQuery === $);// true2、文档遍历和操作
// 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 hrefvar 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. 功能
)
_LCD显示图片)
