http://jquery.cuishifeng.cn/
jquery链接
0、Jquery创建标签
var $option = $('<option>')
一、选择标签
注意
var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象
DOM对象和JQuery对象直接的转换
$ 符代替的JQuery
1、基础选择器
标签选择器
$("h2")
id选择器
$("#i1")
类选择器
$(".c1")
选择所有元素
$("*")
组合选择器
$("#i1, h2, .c1")
配合选择器
$("h2.c1")
2、层级选择器
后代选择器
$("form input")
儿子选择器
$("label>input")
毗邻选择器
$("label+input")
弟弟选择器
$("#p2~li")
层级选择器,选择的都是后面的
3、属性选择器
$("form input[type='email']")
4、基本筛选器
:first // 第一个
:last // 最后一个
:eq(index) // 第index个元素
:gt(index) // 大于指定索引元素
:lt(index) // 小于指定索引元素
:odd // 索引为奇数的元素
:even // 索引为偶数的元素
:not(元素选择器) // 不含有该元素选择器
:has(元素选择器) // 含有该元素选择器, 这里指的是该元素选择器的父标签
index是从0开始的,可以看成list,index可以为负数
5、表单筛选器
:text
:password
:radio
:checkbox
:file
:submit
:button
:reset
表单对象属性
:disabled
:checked
:selected
二、筛选器方法
下一个元素
$("#i1").next()
$("#i1").nextAll()
$("#i1").nextUntil(#i2")
next()不包含自己本身,nextUntil() 不包含Until本身
上一个元素
$("li").prev()
$('li').prevAll()
$('li').prevUntil("#p3")
父亲元素
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
儿子元素
$("#id").children()
兄弟姊妹元素
$("#id").siblings()
查找
$("div").find(".c1")
其它
.first()
.last()
.not()
.has()
.eq()
三、操作标签
1、样式操作
addClass()
removeClass()
hasClass()
toggleClass()
注意:()里的是名称,不带 . #
修改CSS样式
$(this).css({"color": "red", "font-size": "24px"});
2、位置操作
$(".c1").offset(); // 获取标签位置,相对于body
$(".c1").offset({top:100, left:100}); //设置标签的位置相对于body
$(".c3").position(); //获取相对于父级标签的位置
注意:position(),不能设置位置
$(window).scrollTop(120); // 设置到距离顶部120px
$(window).scrollTop(); // 获取当前滚动条的值
$(window).scroll() // 对滚动条做监听
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
3、尺寸
$(".c1").height(); // 获取context 高度
$(".c1").height(200); //设置context 高度
$(".c1").width(); //获取context 宽度
$(".c1").width(400); //设置context 宽度
$(".c1").innerHeight(); // 获取 context + padding的高度
$(".c1").innerHeight(140); //设置 context + padding的高度
$(".c1").innerWidth(); // 获取 context + padding的宽度
$(".c1").innerWidth(240); //设置 context + padding的宽度
$(".c1").outerHeight(); // 获取 context + padding + border 的高度
$(".c1").outerHeight(150); // 设置 context + padding + border 的高度
$(".c1").outerWidth(); // 获取 context + padding + border 的宽度
$(".c1").outerWidth(300); // 设置 context + padding + border 的宽度
注意:修改的是context的大小
4、文本操作
html操作
$("#d1").html(); # 查看第一个符合查找标签的html
$("#d1").html("<p>hello</p>"); // 设置全部标签
文本操作
$("#d1").text(); //获取所有符合查找标签的值
$("#d1").text("jkl"); // 设置所有的值
值
text
$(":text").val(); // 查看文本的值
$(":text").val("wutong"); //设置文本的值
password
$(":password").val(); // 查看
$(":password").val("fghvbX3ec"); //设置
checkbox
var $checkEle = $(":checkbox:checked");
for (var i = 0; i<$checkEle.length; i++){
console.log($($checkEle[i]).val());
}
// 查看选择的多选框
$("[name='hobby']").val(['basketball']) // 设置多选框
radio
$(":radio:checked").val() // 查看选择单选框的值
//select
$("#s1").val() //查看select的选项
$("#s1").val("010") //设置
注意:radio和checkbox都是多个标签,其中radio是单选框,因此可以直接使用val()
checkbox要通过循环,设置值的时候他们可以通过共同的name属性来设置
5、属性操作
$("img").attr("src"); // 获取属性 src 相当于key
$("img").attr("src", "a.jpg") // 设置属性 属性->key 属性值->value
$("img").attr({"src": "a.jpg", 'title': '美女'})
$("img").removeAttr("src")
对于radio和checkbox 属性用prop()
$("#h1").prop("checked") // 获取当前选择框的状态
$("#h3").prop("checked", false) //设置选择框的状态
6、文档操作
标签内部
var liEle = document.createElement("li")
liEle.innerText = 0;
$("#u1").prepend(liEle); // 在ul内部元素的最前面
$("#u1").append(liEle); // 在ul内部元素的最后面
注意:创建的标签是一个对象
appendTo() 和 prependTo() 只是把 #ul 和 liEle 的位置换了
同级标签
var liEle = document.createElement("li");
liEle.innerText=2.5
$("#l1").after(liEle); // 同级元素l1的后面
$("#l1").before(liEle); // 同级元素l1的前面
注意:insertAfter() insertBefore() 只是把 #li 和 liEle 的位置换了
$("ul").remove(); // 删除ul本身
$("ul").empty(); // 清空ul
// 替换操作
var imgEles = document.createElement("img");
var url = "v.jpg"
$(imgEles).attr("src", url);
$("a").replaceWith(imgEles);
// 克隆
$("#b1").clone(true).insertAfter(this);
true 复制标签本身的事件
四、事件
1、页面加载
// 在head 里添加, 格式
<script src="jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function () {
// JQuery和JavaScript代码
});
</script>
2、常用事件
click // 点击
change // select
keyup // 键盘监听
focus blur // 用在 input
3、绑定事件
1、格式:
Jquery对象.on('事件', '选择器', function(){})
2、优点
事件冒泡和事件捕获
jquery对象选择恰当的选择器,在添加数据后,很好的决绝了数据不能删除的问题
3、顺序
先冒泡到jquery对象 -> 选择器进行事件捕获
4、动画效果
$("img").show(时间毫秒); // 图片 无->有
$("img").hide(时间); // 隐藏
$("img").toggle(时间); // 取反
滑动
.slideDown(时间) // 向下
.slideUp(时间) // 向上
.slideToggle(时间) // 取反
淡入淡出
.fadeIn(时间) // 入
.fadeOut(时间) //出
.fadeToggle(时间) // 取反
.fadeTo(时间, 阿尔法值) // 什么透明度
自定义
.animate({}, 时间)
5、each
jquery对象.each(function(){....}) // 与for循环效果一致
li = [1, 2, 4, 5, 3]
$.each(li, function(i, v){
console.log(i ,v)
});
i 索引 v li中的值
1、作用
储存数据
2、jQuery 对象都能储存数据
3、格式
jQuery对象.data(key, value) // 设置
jQuery对象.data(key) // 获取
1、JQuery直接调用
jQuery.extend(
{k:function(){}}
)
调用 $.k
2、JQuery对象调用
jQuery.fn.extend({k:function(){}}
)
调用 JQuery对象.k