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中的值
6、data
1、作用 储存数据 2、jQuery 对象都能储存数据 3、格式 jQuery对象.data(key, value) // 设置 jQuery对象.data(key) // 获取
7、插件
1、JQuery直接调用 jQuery.extend( {k:function(){}} ) 调用 $.k 2、JQuery对象调用 jQuery.fn.extend({k:function(){}} ) 调用 JQuery对象.k