一、$这个符号到底是什么？
$是jQuery中为window对象定义的属性 jQuery$与jQuery在使用时可以互换其实就是一个函数，来源于jQuery库中
把jQuery和$作为了window的一个属性
window.jQuery = window.$ = jQuery;
Object.prototype.toString.call($) 可以知道$也是一个函数
jQuery文件中有一个基本骨架 自执行函数（定义后自己调用了）
$(function(){})
$ 与jQuery是等价的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// $这个符号到底是什么？
// ------》其实就是一个函数，来源于jQuery库中
// window.jQuery = window.$ = jQuery;
// 把jQuery和$作为了window的一个属性
// jQuery库------自执行函数（定义后自己调用了）
// $ jQuery是等价的
(function(){
alert(123)
}())
// 参数传递不同，效果也不一样。
// $(function(){}) 入口函数
// $("") 选择器/创建一个标签
// $(dom对象) js--》jQUery
// $(function(){})
// jQuery(function(){})
// 判断类型[object Function]
console.log(Object.prototype.toString.call($))
console.log(window.jQuery === window.$) //true
console.log(jQuery === $) //true
// $是jQuery中为window对象定义的属性 jQuery
// window.jQuery = window.$ = jQuery;
// Object.prototype.toString.call($) 可以知道$也是一个函数
// jQuery文件中有一个基本骨架 自执行函数
// $(function(){})
// $与jQuery在使用时可以互换
</script>
</head>
<body>
</body>
</html>
二、js中的dom对象与jQuery对象的互换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.obox {
width: 100px;
height: 100px;
border: 1px solid aqua;
}
</style>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/**
* 非行内样式获取法
*/
function getStyle(obj, name) { //obj:操作哪一个标签 name:该标签的属性
if (obj.currentStyle) { //兼容IE
return obj.currentStyle[name];
} else { //兼容非IE浏览器---谷歌 火狐等等
return getComputedStyle(obj, false)[name];
}
}
// js中的dom对象与jQuery对象的互换
window.onload = function() {
// 可以使用jQuery吗？ 可以
// 原生态js通过选择器获取元素
var btn = document.querySelector('button');
console.log(btn)
// console.log(getStyle(btn,'width'))
// 将原生态dom对象 jQuery对象 通过$()进行
// console.log(btn.html());html()--innerHtml
console.log($(btn).html())
var $btn = $("button");
console.log($btn)
// console.log(getStyle($btn,'width'))
// 将jQuery对象-----js的dom对象
// 1.通过下标 jQuery得到的标签是一个数组
console.log(getStyle($btn[0], 'width'))
// 2.通过get方法
console.log(getStyle($btn.get[0], 'width'))
}
</script>
</head>
<body>
<div class="obox">
</div>
<button type="button">点击设置文本内容</button>
</body>
</html>
三、$工具方法的使用
1.$.each()：遍历数组、对象、对象数组中的数据
2.$.trim()：去除字符串两边的空格
3.$.type(obj)：得到数据的类型
4.$.isArray(obj)：判断是否是数组
5.$.isFunction(obj)：判断是否是函数
6.$.parseJSON(obj)：解析json字符串转换为js对象/数组<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- jQuery库 --> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript"> // $工具方法的使用 // 1.$.each()：遍历数组、对象、对象数组中的数据 // (与js中for循环一致) // 定义一个数组，保存数据 var arr = ["yiyi","erer","snasna","sisi"]; console.log(typeof(arr)) // index 下标 // name 值 $.each(arr,function(index,name)){ console.log(arr[index]) } console.log("-------------") // 对象中的属性定义 通过Map键值对的形式定义 var student = {"name":"zhangsan","sex":"nv","age":18}; console.log(typeof(student)) // each方法遍历对象 // name 属性名称 // value 属性值 $.each(student,function(name,value){ console.log(name,value); }) console.log("-------------") // 对象数组的定义 var students =[ {"name":"zhangsan1","sex":"nv","age":18}, {"name":"zhangsan2","sex":"nv","age":18}, {"name":"zhangsan3","sex":"nv","age":18}, {"name":"zhangsan4","sex":"nv","age":18} ]; // 遍历 $.each(students,function(index,obj){ console.log(index,obj); $.each(obj,function(name,value){ console.log(name,value); }); }); console.log("-------------") // 2.$.trim()：去除字符串两边的空格 var str = " aksjhcd "; // jQuery console.log(str.length); // js console.log($.trim(str).length); // 3.$.type(obj)：得到数据的类型 // 与js中的typeof一样 console.log($.type(arr));//array console.log($.type(student));//obj console.log($.type(student));//obj // 4.$.isArray(obj)：判断是否是数组 console.log($.isArray(student)); console.log($.isArray(arr)); // 5.$.isFunction(obj)：判断是否是函数 console.log($.isFunction(getName)); // 6.$.parseJSON(obj)：解析json字符串转换为js对象/数组 var stu =" {\"name\":\"zhangsan4\",\"sex\":\"nv\",\"age\":18}"; console.log($.type(stu)); var jsonStu = $.parseJSON(stu); console.log($.type(jsonStu)); $.each(jsonStu,function(name,value){ console.log(name,value) }); </script> </body> </html>
四、jQuery属性
1.attr()：获取某个标签属性的值，或设置某个标签属性的值
2.removeAttr()：删除某个标签属性
3.addClass()：给某个标签添加class属性值
4.removeClass():删除某个标签class属性值
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
8.val()：主要用户获取/设置输入框的值<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .sb{ /* border: 10px solid blueviolet; */ background-color: yellow; } .obox2{ width: 100px; height: 100px; background-color: antiquewhite; } .sb2{ background-color: aquamarine; } </style> <!-- jQuery库 --> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!-- jQuery中的属性和样式设置和获取 --> <hr > <h2>1.attr()：获取某个标签属性的值，或设置某个标签属性的值 注意事项：可以设置表单元素的属性，但是不能获取</h2> <div id="odiv" style="width: 100px;height: 100px;background-color: #00FFFF;"> </div> <input type="text" id="inputs" value="" /> <button type="button" id="obtn1">点击获取</button> <button type="button" id="obtn2">点击设置</button> <button type="button" id="obtn3">点击设置input</button> <script type="text/javascript"> $("#obtn1").click(function(){ alert($("#odiv")).attr("id"); }) $("#obtn2").click(function(){ $("#odiv").attr("name","demo") }) $("#obtn3").click(function(){ // $("#inputs").attr("name","demo2") alert($("#inputs").attr("value")) }) </script> <h2>2.removeAttr()：删除某个标签属性 注：移除整个属性</h2> <div name="sb" id="ok"> </div> <button type="button" id="obtn4">移除name属性</button> <script type="text/javascript"> $("#obtn4").click(function(){ $("#ok").removeAttr("name"); }) </script> <h2>3.addClass()：给某个标签添加class属性值 注：如果标签上有class 继续使用addClass后会叠加样式 <br> 4.removeClass():删除某个标签class属性值 </h2> <div id="odiv2"> </div> <button type="button" id="obtn5">添加样式</button> <button type="button" id="obtn6">移除样式</button> <script type="text/javascript"> $("#obtn5").click(function(){ $("#odiv2").addClass("obox2"); }) $("#obtn6").click(function(){ $("#odiv2").removeClass("sb"); }) </script> <h2> 5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选(专门用来获取和设置表单元素) </h2> <input type="text" name="sb" id="one"/> <button type="button" class="mybtn">点击设置</button> <script type="text/javascript"> // 获取name属性或者value属性 $(".mybtn").click(function(){ $("#one").prop("name","lisi") $("#one").prop("value","lisi") }) </script> <h2> 6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签） 7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签) 8.val()：主要用户获取/设置输入框的值 </h2> <div id="demo1"> 好好学习 <div> 天天开心 </div> </div> <input value="123" type="text" id="demo2" /> <script type="text/javascript"> console.log($('#demo1').html()); console.log($('#demo1').text()); // val()获取非表单元素 结果为空 console.log($('#demo1').val()); // 表单元素 console.log($('#demo2').val()); // 表单元素通过html() 结果为空 console.log($('#demo2').html()); // 表单元素通过text() 结果为空 console.log($('#demo2').text()); </script> <hr > </body> </html>
五、表格隔行换颜色
<h2>案例：表格隔行换颜色</h2>
<table border="1" width="100%" height="300px">
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td>item4</td>
<td>item5</td>
</tr>
</table>
<script type="text/javascript">
$("table tr:even").addClass("sb");
$("table tr:odd").addClass("sb2");
</script>
<hr >
六、全选以及取消全选
<h2>全选</h2>
<button type="button" id="all">全选</button>
<button type="button" id="qxall">取消全选</button>
<input type="checkbox" value="1" />1
<input type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input type="checkbox" value="4" />4
<input type="checkbox" value="5" />5
<script type="text/javascript">
$("#all").click(function(){
// 获取所有的复选框
$("input:checkbox").each(function(){
// console.log($(this).val())
$(this).prop("checked",true)
})
})
$("#qxall").click(function(){
// 获取所有的复选框
$("input:checkbox").each(function(){
// console.log($(this).val())
$(this).prop("checked",false)
})
})
</script>
七、CSS
1.css()：设置标签的css样式
获取样式值：css("样式名")
设置单个样式：css("样式名","样式值")
设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
2.位置
offset()：相对整个大容器的相对位置
position()：相对父容器的相对位置
scrollXX
scrollTop()：滚动条到顶部距离
3.尺寸
内容尺寸
内部尺寸
外部尺寸
注意：参数为true，再加上margin
width():容器宽
height():容器高
innerWidth()：width+padding
innerHeight()：height+padding
outerWidth():width+padding+border
outerHeight():height+padding+border
css代码测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#odiv{
width: 100px;
height: 100px;
background-color: #00FFFF;
position: absolute;
left: 200px;
top:100px;
border: 10px solid khaki;
}
.box{
position: relative;
width: 50px;
height: 50px;
background-color: #FAEBD7;
left: 20px;
top:20px;
}
</style>
<!-- jQuery库 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
for(var i=1;i<2000;i++){
document.write("<br />")
}
</script>
<div id="odiv">
<div class="obox">
</div>
</div>
<script type="text/javascript">
var $odiv = $("#odiv");
console.log($odiv.offset().left);
console.log($odiv.offset().top);
var $obox = $("#obox");
console.log($obox.position().left);
console.log($obox.position().top);
window.onsroll = function(){
console.log("滚动了");
}
$(window).scroll(function(){
console.log($(this).scrollTop())
})
console.log($odiv.width());
// width+padding
console.log($odiv.innerWidth());
// width+padding+border
console.log($odiv.outWidth());
</script>
</body>
</html>
扫一扫
1464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
