一 jQuery是什么?
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器
<4>jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
二 什么是jQuery对象?
jQuery 对象就是通过jQuery包装DOM对象后产生的对象,jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
基础语法: jquery的基础语法:$(selector).action()
三 jQuery引入方式
下载地址:https://code.jquery.com/jquery-3.3.1.js,复制代码或者下载它,创建一个Jquery-xxxx.js文件,引入代码如下
四 选择器和筛选器
4.1 选择器
4.1.1 基本选择器(4种 element(标签), *(全部), .(class) #(id) ) // element // $("p").css('color','red'); // * // $("*").css('color','red'); // . class // $('.i1').css('color','red'); // # id $('#a1').css('color','red'); 4.1.2 层级选择器 (4种) $(".outer div") 后代选择器 $(".outer>div") 子代选择器 $(".outer+div") 毗邻选择器 $(".outer~div") 最近标签毗邻选择器
# 后代选择器
hello div1 hello i
hello div2
# 子代选择器
hello div1uuuuuuu
hello div2p22222
# 毗邻
毗邻 script中添加 $('div+b').css('font-size','20px')
# 隔了一层或多层标签的邻居
xxxp3p3
毗邻 script中添加 $('div~b').css('font-size','30px')
4.1.3 基本筛选器
$("li:first") $("li:last") $("li:eq(2)") $("li:even") $("li:gt(1)") $("li:lt(1)")
- 1111
- 2222
- 3333
- 4444
- 5555
// 第一个筛选器
$('li:first').css('font-size','20px');
// 最后一个筛选器
$('li:last').css('font-size','20px');
// 等于第几个筛选器 从第0下标开始 3就是第四个标签
$('li:eq(3)').css('font-size','20px');
// 小于第几个筛选器
$('li:lt(3)').css('font-size','20px');
// 大于第几个筛选器
$('li:gt(3)').css('font-size','20px');
4.1.4 属性选择器
$('[id="div1"]') $('["xiong="xa"][id]')
自定义属性
自定义属性2
// 系统属性
$('[class="p1"]').css('color','blue');
// 自定义属性
$('[xiong="xia"]').css('color','yellow');
// 多个属性
$('[class="p1"][xiong="xi2a"]').css('color','blue');
4.1.5 表单选择器 $('[:text]')
// 这样的话就是属性选择器了
$('[type="text"]').css('width','50px');
// 表单选择器
$(':text').css('width','60px');
4.1.6 选择器
children() //子代 find() //后代 next() //下一个标签 nextAll() //标签下面所有的 nextUntil("#xx") //直到找着id为xx的标签,但不包含xx prev() //上一个标签元素 prevAll() //上一个标签所有元素 preUntil('#xx') // 直到找着上一个元素id为xx的标签或者class,但不包含xx parent() //父级标签元素 parents() //父级往上的所有标签元素 parentUntil() //// 直到找着父级id为xx的标签或者class,但不包含xx siblings() //除了本身元素,周边所有元素都包含
# 用法
uuuuuccc3twop
threep
threedivuuuuuuuuu3upp
$('.first').children().css('color','blue'); // 后代的div选择 $('.first').find('div').css('color','blue'); // 下一个标签 $('.firsts').next().css('color','blue'); // 下一个所有标签 $('.firsts').nextAll().css('color','blue'); //下一个选择的标签,不包含选择的标签 $('.firsts').nextUntil('.po').css('color','blue'); //上一个标签 $('.firsts').prev().css('color','blue'); // 上一个所有标签 $('.firsts').prevAll().css('color','blue'); //上一个选择的标签,不包含选择的标签 $('.firsts').prevUntil('.ccc').css('color','blue'); // 父级标签除了本身标签往上一层的标签都是父级 $('.three').parent().css('color','blue'); //父级往上的所有标签元素 $('.firsts .twodiv .three').parents('body').css('color','blue'); // 直到找着父级id为xx的标签或者class,但不包含xx $('.firsts .twodiv .three').parentsUntil('body').css('color','blue'); //除了本身元素,周边所有元素都包含 $('.firsts').siblings().css('color','blue');
4.1.7 操作属性
// 固有属性建议用prop,自定义属性建议用attr
attr('值') //获取值内容 attr('值','内容') //设置值内容 prop('值') //只能查找内置标签属性 val('固有属性') //只能是固有属性才能被查找 --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr])
attr属性
prop 属性
console.log($(':checkbox').prop("checked")) console.log($('.inp2').prop("checked"))
//也可以直接设定值 attr 跟prop 都是 只有一个为查询,两个(第一个是对象,第二个是值) console.log($('.inp2').prop("checked",true))
4.1.7 循环
111 |
---|
111 |
111 |
// 正反向练习
音乐美女爬山
4.1.8 增删改
注意:新加的值每次都需要加$
//内部插入 $("").append(content|fn) ----->$("p").append("Hello"); $("").appendTo(content) ----->$("p").appendTo("div"); $("").prepend(content|fn) ----->$("p").prepend("Hello"); $("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("Hello"); $("").before(content|fn) ----->$("p").before("Hello"); $("").insertAfter(content) ----->$("p").insertAfter("#foo"); $("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换 $('h1').replaceWith($ele) //删除 $(".increase").empty() $(".increase").remove() //克隆 var $ele2=$(".increase").clone() $(".increase").after($ele2)
增删改 hello world
增加 在已有内联标签的下边
// 方法一: 直接添加 // $(".increase").append("hello world
") //方法二 var $ele=$("") $ele.html("hello world") $(".increase").append($ele) // 键放前面,值放后边 $ele.appendTo(".increase") // 值放在前面,键放后边
增加 在已有内联标签的上边
// $(".increase").prepend($ele) $ele.prependTo(".increase")
增加 在已有块联标签的下边 在标签外
// $(".increase").after($ele) $ele.insertAfter(".increase")
增加 在已有块联标签的上边 在标签外
// $(".increase").before($ele) $ele.insertBefore(".increase")
替换
$('h1').replaceWith($ele)
删除 清空标签内的所有内容
$(".increase").empty()
删除 直接删除标签
$(".increase").remove()
克隆
// 这种方式有问题,每次复制都会全部复制 var $ele2=$(".increase").clone() $(".increase").after($ele2)
// 增加删除框
复制框
4.1.9 css操作
CSS $("").css(name|pro|[,val|fn]) 位置 $("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val]) 尺寸 $("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
css操作
offset
//以body做为夭口的偏移量 console.log($(".up").offset().top); console.log($(".up").offset().left); console.log('down: '+$(".down").offset().top); console.log('donw: '+$(".down").offset().left);
position
// 相对于已经定位的父标签的偏移量 //给down增加一层测试position偏移量 js中增加 .donw_f {position: absolute;}console.log($(".up").position().top); console.log($(".up").position().left); console.log($(".down").position().top); console.log($(".down").position().left);
以position做为偏移量,down的porision参照物是它的父级,所以也就是直接为0,如果是以body那就是200
height widht
// 高度height console.log($('.up').height()); console.log($('.down').height()); // 宽度widht console.log($(".up").width()); console.log($(".down").width());
innerHeight , outerHeight , outerHeight
.up{ border: 3px solid red; padding: 4px; margin: 2px; background-color: #ccdcef; } //包含padding值大小 console.log('innerHeight: '+$(".up").innerHeight()); //包含padding跟border值大小 console.log('outerHeight: '+$(".up").outerHeight()); // 包含 padding , border与 margin 外边界的大小 console.log('outerHeight: '+$(".up").outerHeight(true));
scrollTop //获取下拉框位置并返回顶部returnTop 返回顶部
4.1.10 事件
// 页面载入 方式一 $(document).ready(function () { 内容 }) // 页面载入 方式二 $(function() ){ 内容 } // 点击事件 [标签,.属性,#id].click(function()) ('ul').click(function () { 内容 }) // 点击事件无法使用 [标签,.属性,#id].bind( 'click',function() ){ 内容 } $('ul li').bind('click',function () { alert(123) }) // 临时点击事件,每次点击的时候会重新从这里查找 $('ul').on('click','li',function () {}
事件
- 111
- 222
- 333
5 动画效果
5.1:显示隐藏
动画1 hello world
5.2 滑入滑出
动画2 hello world
5.3 淡入淡出
动画3
5.4 回调函数
回调函数
5.5 插件
扩展 hello 11
hello 22
下拉框
下拉框 选中添加到右边>> 全部添加到右边>><<选中删除到左边 <<全部删除到左边