目录
jQuery简单了解
jQueryjavaScript封装的一个常用方法库，write less,more than. 写的更少，做的更多
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery的引入
<!-- 在线方式 CDN -->
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script> -->
<!-- 本地引入-->
<script src="./js/jquery.1.12.4.js"></script>
<script>
// 版本的区别：
// 1.xx.x: PC端全兼容的
// 2.xx.x: 提供了一些新的API 不全兼容
// 3.xx.x：相当于1.xx.x 和2.xx.x综合增加了一些新的API，删除一部分API 不全兼容
// jQuery的引入
$("div").css({
width:500,
height:500,
backgroundColor:"red"
});
</script>jQuery理解
<script src="./js/jquery.1.12.4.js"></script>
<script>
var version = "1.12.4",
// Define a local copy of jQuery
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
},
jQuery函数调用，返回了jQuery这个类的实例 实例的本质就是对象
// 给window自定义属性 jQuery 和 $ 赋值为 jQuery这个函数
if ( !noGlobal ) {
window.jQuery = window.$ = jQuery;
}
// 要使用jQury中的API都要用 $ 或 jQuery
</script>jQuery的入口函数
<script src="./js/jquery.1.12.4.js"></script>
<script>
// window.onload 和 $(document).ready(callBack); 区别：
// window.onload保证所有的资源 $(document).ready(callBack)保证结构加载完毕,执行速度更多
// window.onload使用DOM0绑定后边覆盖前边，jQuery入口函数后边不会覆盖前边的
window.onload = function () { //保证所有的资源加载完毕再去执行js代码
var box = document.getElementById("box");
console.log(box);
console.log("aa");
}
window.onload = function () {
var box = document.getElementById("box");
console.log(box);
console.log("bb");
}
// 保证结构加载完毕再去执行js代码
$(document).ready(function () {
var box = document.getElementById("box");
console.log(box);
console.log("aa1");
});
$(document).ready(function () {
var box = document.getElementById("box");
console.log(box);
console.log("bb1");
});
// $这个函数传递不同的参数有不同的功能
// $(callBack); 推介使用 $这个函数传递一个参数是一个函数的话就是入口函数
$(function () {
var box = document.getElementById("box");
console.log(box);
});
</script>jQuery学习参考网址
jQuery的选择器
jQuery中所有的选择器，都是为了更快获取要操作的元素 通过jQuery选择器获取到的都是jQuery对象
$这个函数传递不同的参数有不同的作用
$(callBack); 入口函数
$("字符串"); 选择器
内置迭代
基本选择器
// 基本选择器
// $("#id值");
console.log($("#box1"));
console.log($("#box1").length);
$("#box1").css("backgroundColor", "red");
// $(".class值");
console.log($(".myBox"));
console.log($(".myBox").length);
$(".myBox").css("backgroundColor", "blue");
// $("tagName");
console.log($("ul"));
$("ul").css("backgroundColor", "yellow");
// 过滤选择器
console.log($("ul.myBox1"));
// 并列选择器
console.log($("ul.myBox1,div.test"));层级选择器（ > + ~ ）
// $("选择器1 选择器2 ...") 后代选择器
console.log($("ul.myBox1 li"));
/* jQuery.fn.init(6)
0: li
1: li
2: li
3: li
4: li
5: li
context: document
length: 6
prevObject: jQuery.fn.init[document, context: document]
selector: "ul.myBox1 li" [
[Prototype]
]: Object(0) */
// $("ul.myBox1 li").css("backgroundColor","green");
// $("选择器1 > 选择器2 ...") 直接后代
$("ul.myBox1 > li").css("backgroundColor", "green");
// $("选择器1 + 选择器2") 匹配所有紧接在 prev 元素后的 next 元素
console.log($("h2 + ul"));
// $("选择器1 ~ 选择器2") 匹配 prev 元素之后的所有 siblings(相邻) 元素
console.log($("h2 ~ ul"));过滤选择器（：first）
// $("选择器:first "); 获取匹配的第一个元素
console.log($("ul.myBox1 li:first"));
// $("选择器:last "); 获取匹配的最后一个元素
console.log($("ul.myBox1 li:last"));
// $("选择器:first-child "); 获取第一个元素(对位置有要求)
console.log($("ul.myBox1 > li:first-child"));
// $("选择器:last-child "); 获取最后一个元素(对位置有要求)
console.log($("ul.myBox1 > li:last-child"));
//:even (匹配的是偶数索引，对应奇数行) / :odd(匹配的是奇数索引，对应偶数行)
$("#box2 li:even").css("backgroundColor","red");
$("#box2 li:odd").css("backgroundColor","blue");
//:lt(index); 小于这个索引
//:eq(index); 对应索引
//:gt(index); 大于这个索引
$("#box3 li:eq(5)").css("backgroundColor","red");
$("#box3 li:lt(5)").css("backgroundColor","yellow");
$("#box3 li:gt(5)").css("backgroundColor","blue");属性选择器
// 单个值可以省略单引号或双引号
// [attr] 包含某个属性
console.log($("div[class]"));
//id
console.log($('div[id]'));
// [attr=val] 属性值等于某个值
console.log($("div[class='box2']"));
console.log($("div[class='box1 box2']"));
// [attr^=val] 属性值以某个值开头
console.log($("div[class^=b]"));
// [attr$=val] 属性值以某个值结尾
console.log($("div[class$=1]"));
// [attr*=val] 属性值包含某个值
console.log($("div[class*=1]"));
// [attr！=val] 属性值不包含某个值
console.log($("div[class!=box2]"));表单选择器
// :enabled 匹配未禁用的表单元素
console.log($("input:enabled"));
// :disabled 匹配禁用的表单元素
console.log($("input:disabled"));
// :type值
console.log($("input:text"));
console.log($("input:checkbox"));
console.log($("input:radio"));
console.log($("input[type=text]"));
console.log($("input[type=number]"));
// 匹配选中状态的表单元素
// :checked
console.log($("input[type=checkbox]"));
console.log($("input[type=checkbox]:checked"));
console.log($("input[type=checkbox]:checked").length);
// :selected
console.log($("select option:selected"));
console.log($("select option:selected").length);jQuery元素节点筛选
// jQuery中方法的返回值都是jQuery对象
// $("选择器").children([*]); 获取所有直接的元素子节点
// "*":默认值是* 通配符 匹配所有 传递传参数可以进行过滤
// 参数:选择器
console.log($(".wrap").children());
console.log($(".wrap").children("ul"));
console.log($(".wrap").children(".hello"));
// $("选择器").find("选择器"); 获取匹配的子元素（包含子子孙孙）
console.log($(".wrap").find("ul"));
// first(); 获取第一个元素
// first(); 获取最后一个元素
console.log($("#box > li").first());
console.log($("#box > li").last());
// prev(); 上一个兄弟元素
console.log($("#box3").prev());
// prevAll([*]); 获取所有的哥哥元素
// 传递传参数可以进行过滤
// 参数:选择器
console.log($("#box3").prevAll());
console.log($("#box3").prevAll("ul"));
// next(); 下一个兄弟元素
console.log($("#box3").next());
// nextAll([*]); 获取所有的弟弟元素
// 传递传参数可以进行过滤
// 参数:选择器
console.log($("#box3").nextAll());
console.log($("#box3").nextAll("p"));
// parent(); 获取直接父级元素
console.log($("#box3").parent());
// parents(); 获取所有的父级元素
// 传递传参数可以进行过滤
// 参数:选择器
console.log($("#box3").parents("div"));
// siblings(["*"]); 获取所有的相邻元素
// 传递传参数可以进行过滤
// 参数:选择器
console.log($("#box3").siblings());
console.log($("#box3").siblings("ul"));
console.log($("#box3").siblings("p"));
$("#box3").siblings("ul").css("backgroundColor", "red");
jQuery链式调用和转换为jQuery对象的方法
jQuery链式调用
var arr = [1,5,3,4,2];
// 链式调用每次方法调用完成返回的都是当前这个类的实例(对象)
var res = arr.sort().splice(1,3).slice(1,);
console.log(res);
$("div").css("width","500px").css("height","200px").css("backgroundColor","red");js对象和jQuery对象的相互转化
原生js对象和jQuery对象是相互独立的，API不互通，需要进行相互转换
var div = document.getElementsByTagName("div")[0];
var arr = [1, 2, 3, 4];
var obj = {
name: "哈哈"
};
console.dir(div);
// div.style.width = "100px";
// div.style.height ="100px";
// div.style.backgroundColor ="red";
var $div = $("div");
console.log($div);
// $div.css({
// width:200,
// height:200,
// backgroundColor:"red"
// });原生js对象转为jQuery对象
// $(原生js对象);
var $oDiv = $(div);
console.log($oDiv);
$oDiv.css({
width: 200,
height: 200,
backgroundColor: "red"
});
var $arr = $(arr);
console.log($arr);
var $obj = $(obj);
console.log($obj);
jQuery对象转为原生js对象
// jQuery对象.get(index);
// jQuery对象[index];
// var div1 = $oDiv.get(0);
var div1 = $oDiv[0];
console.log(div1);
var obj1 = $obj.get(0);
console.log(obj1);index的使用
// $(参数);
// 参数不同作用不同
// callBack:入口函数
// 字符串:选择器
// 原生js对象：转为jQuery对象
// 获取元素
var $oLis = $("ul li");
console.log($oLis);
// 初始化样式
$oLis.css({
lineHeight: "30px",
backgroundColor: "red",
marginBottom: "10px"
});
// 绑定事件
// jQuery中内置迭代
// jQuery对象.事件类型(callBack);
// index("selector");
//selector:选择器
$oLis.click(function () {
console.log(this);
// 将原生js对象转为jQuery
var $li = $(this);
console.log($li);
// 不传递参数返回所在结构的索引
// var index = $li.index();
// 传递参数返回获取到这个jQuery对象中的索引
var index = $li.index("li");
console.log(index);
});
75
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
