JQuery

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