前端基础------jquer y学习
一. jquery是什么
快速,简洁,轻量级的JavaScript库(JavaScript框架)使用户可以快速的操作HTML document,实现动画效果,并方便的地为网站提供AJAX交互.文档全面,详细,还可以使用各种插件.
简单的说就是封装了javascript的功能,更为方便用户使用JavaScript.
二. jquery对象
jquery对象就是jquery把DOM对象包装后产生的对象,jquery对象就可以使用jquer的方法了.
$('#test').html() ------>$('')这是jquery语法, 用来封装DOM对象的, #test是选择器,.html()这是jquery里面的方法
这个语句的意思就是,选择id为test的DOM对象,用jquery封装成jquery对象之后,调用jquery里面的html()方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var variable=DOM对象
var $variable=jquery对象
关于jquery对象和DOM对象的相互转换
1. jquery对象--->DOM对象 $('c3')[0].innertml //把jquery对象转换成DOM对象
2. DOM对象------>jquery对象 $('#i5').html //把id为i5的DOM对象转换成jquery对象并转调用jquery的html()方法
注意:不管jquery是通过什么选择器选择的,他一定是一个集合,即使他是通过id选择的,也是一个集合,只不过是这个集合只有一个元素.
jquery基本语法:$('selector').action()
三. 寻找元素(选择器和筛选器)
1. 选择器的种类(其实就是css的选择器)
1. 基本选择器
$('*') $('#id') $('.class') $('element') $('.class,p,div') //通用,id,类,对象,组合
2. 层级选择器
$('.outer div') $('.outer>div') $('.outer+div') $('.outer~div') //后代,儿子,毗邻,弟弟
3. 属性选择器
$('[mmm]') $('[mmm="baijia"]') $('[mmm="baijia"][wocal]') //具有某些自定义属性的,只要有i选中的那个属性就会被选择,不管他本身还有多少种其他属性
4. 基本筛选器
$('li:first') $('li:last') $('li:eq(3)') $('li:even') $('li:odd') $('li:gt(3)') $('li:lt(2)')
//冒号表示在选择的基础上在再进行一次过滤, first第一个, last最后一个, eq(index)找索引的那个
//even偶数, odd奇数,gt(index), 大于index的所有, lt(index) 小于index的所有
//这边所有的都是指索引
5. 表单选择器
$('[type="text"]') ---------->$(':text') 注意:只适用于input标签: $('input:cheched')
// $('[type=checkbox]').attr('checked','checked')
// $(':checkbox').attr('checked','checked'
6. 关于表单属性选择器:
:enabled :disabled :checked :selected
<body>
<form>
<input type="checkbox" value="123" checked>
<input type="checkbox" value="456" checked>
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3" selected="selected">Trees</option>
<option value="3" selected="selected">Trees</option>
</select>
</form>
<script src="jquery.min.js"></script>
<script>
// console.log($("input:checked").length); // 2
// console.log($("option:selected").length); // 只能默认选中一个,所以只能lenth:1
$("input:checked").each(function(){
console.log($(this).val())
})
</script>
</body>
2.筛选器
1. 过滤筛选器
$('li').first
$('li').last
$('li').eq(3)
$('ul li').hasclass('test')
var index=3;
$(".c3:"+"eq("+index+")").css("color","red");
$(".c3").eq(3).css('color','red'); //这两种效果是等价的, 但是这种不用拼接字符串, 效率高, 所以过滤筛选器比较推荐这一种
$('.c1').hasclass('c1') //判断选择器是否含有某个类名
console.log($('.c1').hasclass('c1')) //返回值为true或者false
2. 查找选择器
查找子标签
$('.p1').children().css('color','red'); //查找所有子标签
$('.p1').children().first().css('color','red'); //查找子标签中的第一个,下同
$('.p1').children(':first').css('color','red');
$('.c9').children('p').css('color','red'); //查找子标签中的p标签
$('.c9').find('p').css('color','red'); //查找后代中的p标签
查找兄弟标签
//向下查找兄弟标签
$('#i2').next().css('color','red'); //查找选中标签的下一个
$('#i2').nextAll().css('color','red'); // 查找选中标签
$('#i2').nextUntil(3).css('color','red'); //从当前标签知道索引,是一个开区间(选中对象,until(index)) 两者都不包含
//向下查找兄弟标签
$('#i2').prev().css('color','red');
$('#i2').prevAll().css('color','red');
$('#i2').prevUntil(3).css('color','red');
查找父标签
// $('.c10').parent(); //查找父亲
//$('.c10').parents(); //[p1,p2,p3....html] //查找所有直系祖宗
// $('c10').parentsUntil() //往上一级级查找祖宗
注意:子标签会继承父标签的样式
注:内置方法都是区分大小写的,要注意
四. 事件的绑定
页面载入
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
事件绑定
//语法: 选中的标签对象.事件.(function(){})
eg: $("p").click(function(){})
事件的委派
$("").on(even,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
//$("")选中的元素,on绑定,even事件,select委派的对象,data参数,可不填,fn)时间所要执行的函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> <script> //这个相当于整个网页加载完成 $(function () { // 语法:$().事件(function(){}) // $('ul li').click(function(){ // alert(this.innerHTML); //this当前触发的标签,即一个DOM对象, //相当于 // 所有要用jquery的方法要转化成jquery对象 // alert($(this).html()); // }) //给ul丙丁事件click,然后把这个事件委派给li,当触发这个事件要执行的函数 $('ul').on('click','li',function () { alert($(this).html()); }); //选中add这个标签,选择触发事件,点击h后要执行的函数 $('.add').click(function (){ $('.box').append('<li>789</li>') }) }) </script> </head> <body> <ul class="box"> <li>123</li> <li>234</li> <li>456</li> <li>567</li> <li class="c1">678</li> </ul> <button class="add">add</button> </body> </html>
五. jquery对象的操作
1. 文本操作
$('').html() //取值
$('').text() //取值
$('').html('参数') //赋值
$('').text('参数') //赋值 赋值的时候和js一样的,当赋值的是标签的时候,两种赋值的参数的展现形式是不一样的
2. 属性操作
$('').attr('参数') //参看参数的值
$('').attr('参数',''值) //设置属性
$('p').attr('alex','dsb'); //设置属性
$('p').attr('alex'); //查看属性操作 只有设置了属性才能查看属性
$('p').removeAttr('alex'); //删除属性
3. class操作
$('test').addClass('xxx') //给class增加一个值xxx
$('test').removeClass('xxx') //把值为xxx的参数从class列表中删除
六. each循环
在jquery中
$('p').css('color','red'); //这个语句的作用是把所有的p标签都进行相同的css样式.这是通过jquery的内部循环方式实现的.
如果对于不同标签进行不同的处理呢!那就需要用到each循环了
1. 先回顾一下js循环
//回顾js的循环
let arr=['美女','帅哥','靓仔','站街的'];
let obj={'老王':'隔壁的','小王':'老王的'};
for (var i=0;i<arr.length;i++){
}
2.jquery的循环方式
//each循环方式一 $代表的是jquery这个类.类就可以使用自己的方法
$.each(arr,function (i,j) {
console.log(i,j)
});
//结果:循环拿出数组的结果.带有索引
//0 "美女"
//1 "帅哥"
//2 "靓仔"
//3 "站街的"
$.each(obj,function(i,j){
console.log(i,j);
});
//结果:
//老王 隔壁的
//小王 老王的
3.
//each循环方式二
$('p').each(function(){
if ($(this).html()=='tom'){
// return false //相当于break
return //相当continue,return的值为undefined,会继续循环
};
console.log($(this).html()); //this当前循环的DOM对象
//console.log(this.innerHTML); //这两个是同价的,只不过对象不同,调用的方法不同
//$(this).html($(this).html()+'!') //给p标签的文本加一个感叹号(先拿到文本,加完感叹号再赋值给他自己)
})
注意:以上实现方法都是通过jquery实现的,自己要去引入jquery
语法总结:
1. $.each(obj,function{}) //obj是一个可迭代对象
2.$('p').each(function{})
七 . 文档节点的处理
//创建一个标签对象 $("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>"); $("").before(content|fn) ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty() $("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
看一个例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="jquery-3.3.1.js"></script> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <body> <h3>员工表格</h3> <div class="container"> <button class="btn btn-info add_btn">添加</button> <table class="table table-hover table-striped table-bordered" > <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>部门</th> <th>薪水</th> <th>操作</th> </tr> </thead> <tbody class="tbody"> <tr> <td>1</td> <td>张三</td> <td>13</td> <td>销售</td> <td>30000</td> <td> <button class="del btn btn-danger">删除</button> <button class=" edit btn btn-warning">编辑</button> </td> </tr> <tr> <td>2</td> <td>李四</td> <td>18</td> <td>技术</td> <td>28000</td> <td> <button class="del btn btn-danger">删除</button> <button class=" edit btn btn-warning">编辑</button> </td> </tr> <tr> <td>3</td> <td>王五</td> <td>22</td> <td>售后</td> <td>12000</td> <td> <button class="del btn btn-danger">删除</button> <button class=" edit btn btn-warning">编辑</button> </td> </tr> </tbody> </table> <div class="hide add"> <hr> <form id='form' action=""> <div> 姓名 <input type="text"> </div> <div> 年龄 <input type="text"> </div> <div> 部门 <input type="text"> </div> <div> 薪水 <input type="text"> </div> 提交 <input type="button" value="submit" class="submit_btn"> </form> </div> </div> <script> //添加 //对添加按钮进行绑定事件 $('.add_btn').click(function(){ $('.add').removeClass('hide'); }); //创建jquery对象 //当提交的时候,把是最后一个标签的编号拿到并加1给要创建的哪一个 $('.submit_btn').click(function () { //创建jquery对象 let $tr=$('<tr>'); let ID=$('.tbody tr:last td:first').html(); ID=parseInt(ID)+1; let $td1=$('<td>'+ID+'</td>>'); $tr.append($td1); //把form表单的内容遍历一遍,一一放进td内,再添加到tr内 //这边要注意,form和text有一个空格 $('#form :text').each(function () { let val=$(this).val(); let $td_temp=$('<td>'+val+'</td>'); $tr.append($td_temp); $td_temp.val('') }); //构建操作标签 $tr.append('<td><button class="del btn btn-danger">删除</button>\n' + '<button class=" edit btn btn-warning">编辑</button></td>'); $('tbody').append($tr); //append参数可以是jquery对象,也可以是标签字符串 // $('tbody').prepend($tr); //添加在第一行 // $tr.appendTo('.tbody'); //把要添加的添加到某个节点,被动的 $('.add').addClass('hide'); }); //删除事件 //法一 // $('.del').click(function(){ // $(this).parent().parent().remove(); // }); //法二 $('.tbody').on('click','button.del',function(){ $(this).parent().parent().remove(); }); </script> </body> </html>
注意:jquery和bootsript自己要导入!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <div class="outer"> <div class="item"> <button class="add">+</button><input type="text"> </div> </div> <script> $(".add").click(function () { let $clone=$(this).parent().clone(); $clone.children("button").html("-").attr("class","rem"); $(".outer").append($clone); }); $(".outer").on("click",".rem",function () { $(this).parent().remove(); }) </script> </body> </html>
八. css相关操作
尺寸操作
$("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> <script> $(document).ready(function(){ console.log($(".c1").height()); //就是.c1的高度 console.log($(".c1").width()); //就是.c1的宽度
console.log($('c1').innerHeight() //c1+padding
console.log($('c1').outerHeight() //c1+padding+border
console.log($('c1').outerHeight(true) //c1+padding+border+margin
}); </script> <style> .c1{ width: 200px; height: 200px; background-color: skyblue; padding: 50px; border:30px solid red; margin: 20px; } </style> </head> <body> <div class="c1"></div> </body> </html>
九. jQuery扩展
1. 扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
<script> jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
2.扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
<body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script src="jquery.min.js"></script> <script> jQuery.fn.extend({ check: function() { $(this).attr("checked",true); }, uncheck: function() { $(this).attr("checked",false); } }); $(":checkbox:gt(0)").check() </script> </body>
