1.$是什么？
1.1 $(function(){});
如果使用上述语句报错了 $ is not deifned，就说明没有引入jQuery文件。
1.2 $是一个函数
参数传递不同，效果也不一样。
1.3 $(function(){}) 入口函数
1.4 $("") 选择器/创建一个标签
2.jQuery文件结构
其实时一个自执行函数
(function(){
window.jQuery = window.$ = jQuery
}());
3.dom对象：原生态js选择器获取到的选择器
jQuery对象：利用jQuery选择器获取到的对象。
dom---->jQuery
var oDiv = document.getElementById('');
var $oDiv = $(oDiv)
jQuery--->1.dom 通过下标
var $div = $("#oDiv");
var div = $div[0];
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.oBox{
height: 100px;
width: 100px;
border: 1px solid pink;
}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function getStyle(obj,name){
if(obj.currentStyle){//兼容IE
return obj.currentStyle[name];
}else{//非IE
return getComputedStyle(obj,false)[name];
}
}
//js中的dom对象与jQuery对象互换
window.onload=function(){
//原生态js 通过选择器获取元素
var btn=document.querySelector('button');
console.log(btn);
// console.log(getStyle(btn,'width'));
//将原生态dom对象 转 jQuery对象 通过$()进行
// console.log(btn.html());
console.log($(btn).html());
var $btn=$("button");
console.log($btn);
//将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">123</div>
<button>点击设置文本内容</button>
</body>
</html>4.工具方法
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- jQuery库 -->
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
function getName(){
}
// $工具方法的使用
//1.$.each(); 遍历（与js中for循环一致）
//作用：遍历对象 遍历数组 遍历对象数组
//定义一个数组
var a=["小米","小v","小风"];
console.log(typeof(a));
//index 下标
//name 值
$.each(a,function(index,name){
// console.log(index,name);
console.log(a[index]);
});
//对象中的属性定义 通过Map键值对形式定义
var student={"name":"张无忌","sex":"男","age":18};
console.log(typeof(student));
//each 方法遍历对象
//name 属性名称
//value 属性值
$.each(student,function(name,value){
console.log(name,value);
});
//对象数组的定义
var students=[
{"name":"张无忌","sex":"男","age":18},
{"name":"张三","sex":"男","age":22},
{"name":"李四","sex":"男","age":28},
{"name":"虎妞","sex":"女","age":18}
];
//遍历
$.each(students,function(index,obj){
console.log(index,obj);
$.each(obj,function(name,value){
console.log(name,value);
});
});
//2.$.trim();
//去除字符串两边的控股
var str=" asfd as";
console.log(str.length);
//jQuery
console.log($.trim(str).length);
//js
console.log(str.trim().length);
//3.$.type();
//与js中的typeof一样 判断值类型
console.log($.type(a));
console.log($.type(student));
console.log($.type(students));
//4.$.isArray(); 判断是否是数组
console.log($.isArray(student));
console.log($.isArray(a));
//5.$.isFunction();
//判断是否是函数
console.log($.isFunction(getName));
//6.$.parseJSON();
//将一个满足JSON格式（符合数组或者对象的定义）的字符串转换成一个对象或者一个数组
var stu="{\"name\":\"虎妞\",\"sex\":\"女\",\"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>
5.jQuery属性以及案例
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.d{
/* border: 10px solid lightcoral; */
background-color: #DDA0DD;
}
.d1{
background-color: cornflowerblue;
}
.dd{
width: 100px;
height: 100px;
background-color: plum;
}
</style>
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h3>jQuery中的属性和样式设置和获取</h3>
<!-- 注意事项：可以设置表单元素的属性，但不能获取 -->
<!-- 1.attr(); 设置或者获取非表单元素中的自带的属性 -->
<div id="oDiv" style="width: 100px;height: 100px;"></div>
<input type="text" id="inputs" value=""/>
<button id="oBtn1">点击获取</button>
<button id="oBtn2">点击设置</button>
<button id="oBtn3">点击设置input</button>
<script>
$("#oBtn1").click(function(){
alert($("#oDiv").attr("id"));
});
$("#oBtn2").click(function(){
alert($("#oDiv").attr("name","demo"));
});
$("#oBtn3").click(function(){
alert(("#inputs").attr("value"));
});
</script>
<!-- 2.removeAtter(); 移除属性-->
<hr />
<div name="d" id="dd"></div>
<button id="oBtn4">移除name属性</button>
<script type="text/javascript">
$("#oBtn4").click(function(){
$("#dd").removeAttr("name");
});
</script>
<!-- 3.addClass(); 添加样式-->
<!-- 4.removeClass(); 移除样式-->
<!-- 如果标签上有class 继续使用addClass会叠加样式 -->
<hr />
<div id="oDiv2" class="d oBox2"></div>
<button type="button" id="oBtn5">添加样式</button>
<button type="button" id="oBtn6">移除样式</button>
<script>
$("#oBtn5").click(function(){
$("#oDiv2").addClass("oBox2");
});
$("#oBtn6").click(function(){
$("#oDiv2").addClass("d");
});
</script>
<!-- 5.prop(); 专门用来获取和设置表单元素-->
<input type="text" id="one" name="d"/>
<button type="button" class="myBtn">点击设置</button>
<script>
//获取name属性或者value属性
$(".myBtn").click(function(){
// alert($("#one".prop("name")));
$("#one").prop("name","小红");
$("#one").prop("value","小红");
});
</script>
<!-- 6.html(); -->
<!-- 7.text(); -->
<!-- 8..val(); -->
<hr />
<div id="demo1">
好好学习
<div>天天向上</div>
</div>
<input value="123" type="text" id="demo2"/>
<script>
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 />
<h2>案例：表格隔行换颜色</h2>
<table border="1" width="100%">
<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("d");
$("table tr:odd").addClass("d1");
</script>
<hr />
<h2>案例 全选(选中|取消)</h2>
<input type="checkbox" id="all"/>全选
<input type="checkbox" id="qx"/>取消全选
<input type="checkbox" name="" id="" value="1" />1
<input type="checkbox" name="" id="" value="2" />2
<input type="checkbox" name="" id="" value="3" />3
<input type="checkbox" name="" id="" value="4" />4
<script>
$("#all").click(function(){
//获取所有的复选框
$("input:checkbox").each(function(){
$(this).prop("checked",true);
});
});
$("#qx").click(function(){
//获取所有的复选框
$("input:checkbox").each(function(){
$(this).prop("checked",false);
});
});
</script>
</body>
</html>
6.css以及案例
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#oDiv{
width: 100px;
height: 100px;
background-color: #6495ED;
position: absolute;
left: 200px;
top: 100px;
border: 10px solid #FFC0CB;
padding: 100px;
}
.oBox{
/* 相对定位 */
position: relative;
width: 50px;
height: 50px;
background-color: lightcoral;
left: 20px;
top: 20px;
}
</style>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<script>
for(var i=1;i<=2000;i++){
document.write("<br />");
}
</script>
<div id="oDiv">
<div class="oBox"></div>
</div>
<script>
var $oDiv=$("#oDiv");
var $oBox=$(".oBox");
console.log($oDiv.offset().left);
console.log($oDiv.offset().top);
console.log($oBx.position().left);
console.log($oBx.position().top);
$(window).scroll(function(){
console.log($(this).scrollTop());
});
//容器宽
console.log($oDiv.width());
//width+padding
console.log($oDiv.innerWidth());
//width+padding+border
console.log($oDiv.outerWidth());
</script>
</body>
</html>
扫一扫
1472
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
