jquey基础整理
1. jquery入口函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
$(function () {
alert("hello");
})
</script>
<body>
hello
</body>
</html>
2. jquery冲突问题解决
如果引入了自定义的jquery文件,并且都是使用$符号定义jquery,那么后引入的会覆盖掉前面引入的
这个时候我们可以自定义一个使用符号,来释放$符号的使用权
var fuhao = jQuery.noConflict();
3. jquery核心函数
- $();就代表jquery的核心函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
//$();就代表jquery的核心函数
//1.接受一个函数
$(function () {
alert("hello,world");
//2.接受一个字符串
//2.1接受一个字符串选择器
//返回一个jquery对象,对象中保存了找到的DOM元素
var box1 = $(".box1");
var box2 = $("#box2");
console.log(box1);
console.log(box2);
//2.2接受一个代码片段
//返回一个jquery对象,对象中保存了创建的DOM元素
var p = $("<p>我是段落</p>");
console.log(p);
box1.append(p);
//3.接受一个DOM元素
//会被包装成一个jquery对象返回给我们
var span = document.getElementsByTagName("span");
console.log(span);
var $span = $(span)
console.log($span);
});
</script>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span</span>
</body>
</html>
4. jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
$(function () {
/**
* 1.什么是jquery对象
* jquery对象是一个伪数组
*
* 2.什么是伪数组
* 有0到length-1的属性,并且有length属性
*
*/
var $div = $("div");
console.log($div);
var arr = [1,3,5];
console.log(arr);
})
</script>
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>
5. 静态方法和实例方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
//1.定义一个类
function AClass() {
}
//2.给类添加一个静态方法
//直接添加给类的就是静态方法
AClass.statiaMethod = function () {
alert("statiaMethod");
}
//静态方法通过类名调用
AClass.statiaMethod();
//3.给类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
//实例方法通过类的实例调用
//创建一个实例(创建一个对象)
var a = new AClass();
//通过实例调用实例方法
a.instanceMethod();
</script>
<body>
</body>
</html>
6. jQuery - each方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
var arr = [1,3,5,7,9];
var obj = {0:1, 1:2, 2:3, 3:4, 4:5, length:6};
/*
第一个参数是遍历到的元素
第二个参数是当前遍历到的索引
注意:原生的forEach方法只能遍历数组,不能遍历伪数组
*/
arr.forEach(function (value,index) {
console.log(index,value);
});
//1.利用jQuery的静态方法遍历数组
$.each(arr,function (index,value) {
console.log(index,value);
});
//jQuery的each方法可以遍历伪数组
$.each(obj,function (index,value) {
console.log(index,value);
});
</script>
<body>
</body>
</html>
7. jQuery map方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
var arr = [1,3,5,7,9];
var obj = {0:1, 1:2, 2:3, 3:4, 4:5, length:6};
//利用原生JS的map方法进行遍历
/*
第一个参数:当前遍历到的元素
第二个参数:当前遍历到的索引
第三个参数;当前遍历到的数组
*/
arr.map(function (value ,index ,array) {
//console.log(index,value,array);
});
//注意点:和原生的forEach一样 不能遍历伪数组
// obj.map(function (value ,index ,array) {
// console.log(index,value,array);
// });
/*
第一个参数:要遍历的数组
第二个参数:每遍历一个参数要执行的回调函数
回调函数的参数
第一个参数:遍历到的元素的值
第二个参数:遍历到的索引
*/
$.map(arr,function (value,index) {
//console.log(index,value);
});
//注意:和jquery的each方法一样,map静态方法也可以遍历伪数组
var res = $.map(obj,function (value,index) {
//console.log(index,value);
return index+value;
});
var res1 = $.each(obj,function (index,value) {
//console.log(index,value);
});
/*
jQuery中的each静态方法和map静态方法的区别
ecah静态方法的默认返回值是,遍历谁就返回谁
map静态方法的默认返回值是,一个空数组
each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对遍历的数组进行处理
*/
console.log(res);
// console.log(res1);
</script>
<body>
</body>
</html>
8. jQuery其它静态方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
/*
$.trim(str);
作用:去除字符串两端的空格
参数:需要去除空格的字符串
返回值:去除空格之后的字符串
*/
var str = " good ";
var res = $.trim(str);
console.log("----"+str+"----");
console.log("----"+res+"----");
//真数组
var arr = [1,3,5,7,9];
//伪数组
var arrLike = {0:1, 1:2, 2:3, 3:4, 4:5, length:6};
//对象
var obj = {"name":"xiaoli", age:25};
//函数
var fn = function () {};
//window对象
var w = window;
/*
$.isWindow(arr);
作用:判断传入的对象是不是window对象
返回值:true/false
*/
var res = $.isWindow(arr);
console.log(res);
/*
$.isArray(arr);
作用:判断传入的对象是不是真数组
返回值:true/false
*/
var res1 = $.isArray(arr);
console.log(res1);
/*
$.isFunction();
作用:判断传入的对象是不是一个函数
返回值:true/false
注意:jQuery框架本质上是一个函数
(function(window , undefined){
})(window)
*/
var res2 = $.isFunction(jQuery);
console.log(res2);
</script>
<body>
</body>
</html>
9. jQuery holdReady方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
/*
$.holdReady(true);
作用:暂停ready执行
*/
$.holdReady(true);
$(document).ready(function () {
alert("ready");
});
</script>
<body>
<button>回复ready事件</button>
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
//alert("btn");
$.holdReady(false);
}
</script>
</body>
</html>
10. jQuery 内容选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
div{
width: 50px;
height: 100px;
background: red;
margin-top: 5px;
}
</style>
<script>
$(function () {
//:contains(text) 作用:找到包含指定文本内容的指定元素
// var $div = $("div:contains('我是div')");
// console.log($div);
//:empty 作用:找到既没有文本内容也没有子元素的指定元素
// var $div = $("div:empty");
// console.log($div);
//:has(selector) 作用:找到包含指定子元素的指定元素
var $div = $("div:has('span')");
console.log($div);
//:parent 作用:找到有文本内容或有子元素的指定元素
// var $div = $("div:parent");
// console.log($div);
});
</script>
<body>
<div></div>
<div>我是div</div>
<div>div123我是div</div>
<div><span></span></div>
<div><p></p></div>
</body>
</html>
11. 属性和属性节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
$(function () {
/*
1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性
对象.属性名称 = 值; p.name = "oop";
对象.属性名称;
对象.["属性名称"] = 值; p["name"] = "zs";
对象.["属性名称"];
3.什么是属性节点
<span name = "it666"></span>
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个Dom元素后,展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点
4.如何操作属性节点
Dom元素.setAttribute("属性名称" , "属性值"); span.setAttribute("name" , "ppp");
Dom元素.getAttribute("属性名称") span.getAttribute("name")
5.属性和属性节点有什么区别
任何对象都有属性
只有Dom元素才有属性节点
*/
/*
function Person() {
}
var p = new Person();
//p.name = "oop";
p["name"] = "zs";
//console.log(p.name);
console.log(p["name"]);
*/
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name" , "ppp");
console.log(span.getAttribute("name"));
});
</script>
<body>
<span name = "it666"></span>
</body>
</html>
12. jQuery attr方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
$(function () {
/*
1.attr(name|pro|key,val|fn)
作用:获取或者设置属性节点的值
可以传递一个参数,也可以传递两个参数
如果传递一个参数,代表获取属性节点的值
如果传递两个参数,代表设置属性节点的值
注意点:
如果是获取:无论找到多少个元素,都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素,如果设置的属性节点不存在,那么系统会自动新增
2.removeAttr(name)
删除属性节点
$("span").removeAttr("class");
删除多个属性节点
$("span").removeAttr("class name");
*/
// console.log($("span").attr("class"));
// $("span").attr("class" , "box");
// $("span").attr("aaa" , "123");
//$("span").removeAttr("class");
$("span").removeAttr("class name");
});
</script>
<body>
<span class="span1" name = "it666"></span>
<span class="span2" name = "hahah"></span>
</body>
</html>
13. jQuery prop 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
$(function () {
/*
1.prop方法
特点和attr方法一样
2.removeProp方法
特点和removeAttr方法一样
*/
$("span").eq(0).prop("demo" , "it666");
$("span").eq(1).prop("demo" , "lalal");
console.log($("span").prop("demo"));
$("span").removeProp("demo");
/*
注意点:
prop不仅能操作属性,还能操作属性节点
官方推荐在操作属性节点时,具有true和flase两个属性的属性节点,
如checked,selected或者disabled使用prop(),其他的使用attr()
*/
console.log($("span").prop("class"));
$("span").prop("class" , "box");
console.log($("input").prop("checked"));//true/false
console.log($("input").attr("checked"));//checked/undefined
});
</script>
<body>
<span class="span1" name = "it666"></span>
<span class="span2" name = "hahah"></span>
<input type="checkbox" checked>
</body>
</html>
14. attr和prop小练习(实现点击按钮切换图片的效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>
$(function () {
//1.给按钮添加点击事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
//2.获取输入框输入的内容
var input = document.getElementsByTagName("input")[0];
var text = input.value;
console.log(text);
//3.修改img中src属性节点的值
$("img").attr("src" , text);
// $("img").prop("src" , text);
}
});
</script>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="https://img0.baidu.com/it/u=2994744999,4030387909&fm=26&fmt=auto&gp=0.jpg" alt="">
<!-- <img src="https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/78310a55b319ebc4cbd4c3e68226cffc1e171624.jpg">-->
</body>
</html>
15. jQuery 类操作相关方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.class1{
width: 100px;
height: 100px;
background: red;
}
.class2{
border: 10px solid #000;
}
</style>
<script>
$(function () {
/*
1.addClass(class|fn)
作用:添加一个类
如果要添加多个,多个类名之间用空格隔开
2.removeClass([class|fn])
作用:删除一个类
如果要删除多个,多个类名之间用空格隔开
3.toggleClass(class|fn[,sw])
作用:切换
有就删除,没有就添加
*/
var btn = document.getElementsByTagName("button");
btn[0].onclick = function () {
//$("div").addClass("class1")
$("div").addClass("class1 class2")
}
btn[1].onclick = function () {
//$("div").removeClass("class1");
$("div").removeClass("class1 class2")
}
btn[2].onclick = function () {
$("div").toggleClass("class1 class2")
}
});
</script>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>
16. jQuery 文本值相关操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border: 10px solid #000;
}
</style>
<script>
$(function () {
/*
1.html([val|fn])
和原生JS中的innerHtml一摸一样
2.text([val|fn])
和原生JS中的innerText一摸一样
3.val([val|fn|arr])
*/
var btn = document.getElementsByTagName("button");
btn[0].onclick = function () {
$("div").html("<p>我是段落<span>我是span</span></p>")
}
btn[1].onclick = function () {
console.log($("div").html());
}
btn[2].onclick = function () {
$("div").text("<p>我是段落<span>我是span</span></p>")
}
btn[3].onclick = function () {
console.log($("div").text());
}
btn[4].onclick = function () {
$("input").val("lalalla");
}
btn[5].onclick = function () {
console.log($("input").val());
}
});
</script>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>