1.引入
1-1.引入方式
<script src="js/jquery-2.2.3.min.js"
type="text/javascript"
charset="utf-8">
</script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"
type="text/javascript"
charset="utf-8"></script>
1-2.优点
- 代码简洁,开发效率高
- 多数不需要考虑js代码兼容性
- jq有很多js没有的好用的方法
1-3.简单代码
- window加载结束函数
window.onload = function(){}
- jQuery下的加载完毕函数
$(document).ready(function(){})
- 或者
$(function(){ })
2.选择器
2-1.js下的选择操作
var div1 = document.getElementById("div1");
div1.innerHTML = "div1";
2-2.jQuery下的选择操作
// 通过选择器获取
$("#div1").html("div");
$(".div1").html("lalala");
// 伪类选择器
$("p:first").html("第一个");
$("p:last").html("最后一个");
// 选择第几个,从0开始数
$("p:eq(1)").html("eq");
$("p").first().html("diyige");
$("p").last().html("zuihouyige");
$("p").eq(1).html("eq");
//val() == value
//表示type属性为" "的input标签
$(":text").val("text");
$(":button").val("ok");
$(":submit").val("tijiao");
//even偶数、odd奇数
$("p:even()").css("background-color","red");
$("p:odd()").css("background-color","black");
对应的html代码为：
<div id="div1" class="div1">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
<input type="text" name="" id="" value="" />
<input type="button" name="" id="" value="" />
3.操作样式
3-1.设置一种样式
//设置一种样式
$("#div1").css("width","100px");
3-2.设置多种样式
//设置多种样式
$("#div1").css({"width":"200px",
"height":"200px",
"background-color":"green"});
4.链式操作
$(document).ready(function(){
$("#div1").css({
"width":"100px",
"height":"100px",
"background-color":"red"
});
$("#div1").html("div1");
$("#div1").val("div1");
//链式操作
$("#div1").html("div2").val("div2").css({"width":"200px","height":"200px","background-color":"green"});
})
5.jq取值赋值
5-1.取值赋值一体化
//取值赋值一体化
$("#div1").html("div2");
console.log($("#div1").html());
5-2.取颜色时为RGB
//取颜色时，返回值格式为rgb格式
$("#div1").css("background-color","red");
console.log($("#div1").css("background-color"));
5-3.取值赋值多个元素
// js写法
var ps = document.getElementsByTagName("p");
for(var i = 0; i < ps.length; i++){
ps[i].innerHTML = "p";
}
// jQuery写法
$(".div2 p").html("ppp");
console.log($("#div2 p").html());
//jq进行多个元素取值的时候，只会取首个元素的值，想取所有值，需要for循环
for(var i = 0; i < $("div").length; i++){
console.log($("div").eq(i).html());
}
6.常用方法
<body>
<div id="div1">
<p></p>
<p>
<span>span1</span>
</p>
<div></div>
<p class="p1" name="ppp"></p>
<div></div>
<a href=""></a>
</div>
</body>
6-1.attr设置属性
// attr : 设置属性
$("#div1").attr("class","div1");
console.log($("#div1").attr("class"));
6-2.index返回位置
// index():返回该元素在同级元素中的位置，从0开始
console.log($(".p1").index());
6-3.过滤
//filter\not: 过滤。让查找更加精确。
//filter表示增加一个查找条件
//not表示去掉一个条件
$("p").filter(".p1").html("🐉");
$("p").not("[name=ppp]").html("白🐯");
6-4.has匹配查找
//has: 匹配到后代级中含有 has()里元素 的元素
//（从外向内匹配）
$("p").has("span").css("background-color","green");
6-5.find匹配后代元素
//find: 匹配某元素后代级满足find条件的元素
$("body").find("p").has("span").css("background-color","red");
7.js和DOM对象类型转换
<div id="div1"></div>
var div1 = document.getElementById("div1");
//把DOM对象转换为jq对象
$(div1).html("div1");
//把jq对象转换为DOM对象
$("#div1")[0].innerHTML = "div2";
8.操作DOM
8-1.文本节点
//文本节点
$("#div1").text("葫芦娃");
//清空
$("#div1").empty();
8-2.属性节点
//属性节点
$("#div1").attr("class","div");
console.log($("#div1").attr("class"));
8-3.元素节点操作
//创建
var newNode = $("<div class='div1'>div</div>");
//插入节点尾部
$("body").append(newNode);
newNode.appendTo($("body"));
//插入节点头部
$("body").prepend(newNode);
newNode.prependTo($("body"));
var newNode2 = $("<p class='p1'>p</p>");
//插入某节点前面
newNode2.insertBefore($("#div1"));
//插入某节点后面
newNode2.insertAfter($("#div1"));
8-4.删除节点
// 1.清空内容
newNode.empty();
// 2.移除
newNode.remove();
8-5.克隆节点
$("body").append(newNode.clone());
8-6.替换节点
//替换replaceWith\replaceAll
$(".p1").replaceWith("<a href=###>123</a>");
$("<a href=###>123</a>").replaceAll($(".p1"));
8-7.包裹节点
// (1)wrap: 给多个元素每一个元素外包一个元素
$(".p1").wrap("<div value=div1></div>");
// (2)wrapAll: 给多个元素外整体包一个元素
// 如果多个元素不相邻，则还是包一个整体，放在第一个该元素的位置
$(".p1").wrapAll("<div value=div1></div>");
// (3)wrapInner: 在某元素下添加元素，用来包裹该元素的所有内容。
$(".p1").wrapInner("<span></span>")
<body>
<p class="p1"></p>
<div id="div1"></div>
<p class="p1">
<span class="span1"></span>
</p>
</body>
9.jq事件
// jq事件:on
$(document).on("click",function(){
alert("click");
});
// hide()隐藏、show()显示
var bool = true;
$("#btn").on("click",function(){
if(bool){
$("#div1").hide();
}else{
$("#div1").show();
}
bool = !bool;
})
// toggle():显示隐藏
$("#btn").on("click",function(){
$("#div1").toggle();
})
<input type="button" name="" id="btn" value="显示" />
<div id="div1"></div>
Bootstrap
头信息
<link rel="stylesheet" href="/resources/bs/css/bootstrap.css">
<script src="/resources/js/jquery-3.2.1.min.js"></script>
<script src="/resources/bs/js/bootstrap.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
网友评论