day49_9_10jQuery剩余

一。表单筛选器。

　　在jQuery中有，专门对表单中的元素，进行筛选的表单筛选器。

　　其实使用基本筛选器也可以筛选出相应的元素，但是，为了jQuery的简便性，以及对表单操作的频繁，这里可以使用专门的筛选器：

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

　　这些都是表单中type属性对应的值通过jQuery的语法可以找到相应的标签元素。

　　除此之外，还可以寻找，form表单中的属性值：

:enabled
:disabled
:checked
:selected

　　这些都是input或者select等表单的属性，如果表单中包括该属性，就会被找到。

　　注意：其中：checked本来是radio中的默认选项，但是也会找到selected中的默认option，为了避免这个可以在该筛选器之前加上标签名input：

二。筛选器方法。

　　这个系列方法可以找出一个给定元素标签的上下左右，父子等元素标签，可以通过一个给定的元素，找到整个页面所有的标签元素：

1.下一个元素。

　　找出该元素的下面的某些元素：

$("#id").next() --找出该元素下面的一个元素
$("#id").nextAll() --找出该元素下面的所有的元素
$("#id").nextUntil("#i2")  --找到该元素下面的所有元素，直到#i2元素为止。

实例：

2.上一个元素。

　　找出该元素的上面某些元素。

$("#id").prev()  --找出该元素的上一个元素
$("#id").prevAll()　　--找出该元素的上面所有的元素
$("#id").prevUntil("#i2")  --找出该元素上面的所有元素，直到#i2为止

　　示例：

3.父亲元素。

　　查找该标签的某些父类。

$("#id").parent() //上一个父类
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

示例：

4.儿子和兄弟元素：

$("#id").children();// 找到该元素的所有儿子们
$("#id").siblings();// 找到该元素的所有兄弟们

示例：

其中返回的是一个数组，需要用下标取出才能得到真正的js原生对象，这种对象是不可以使用jQuery的方法，需要使用$()对其进行转换。

5.查找。

　　该方法可以在一个指定的标签范围中，再找一次：

$("div").find("p")

　　可以处理处理结束的元素的后代元素。

6.补充：

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

三。链式操作。

　　jQuery可以支持链式操作。就是可以再操作后再次执行点方法进行操作：

$(this).next().removeClass('hide').parent().siblings().find('.items').addClass('hide')

　　原理就是在每次生成对象时会返回自身，可以继续执行点方法。

四。样式操作。

　　这类操作是操作标签中的class。添加和删除其中的css样式。

1.添加类名：

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

2.设置css：

css("color","red")//DOM操作：tag.style.color="red"

　　可以 通过.css的方法设置一个对象的style格式。

3.位置信息操作：

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

　　.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position()的差别在于： .position()是相对于相对于父级元素的位移。

4.尺寸显示：

　　各种标签元素的尺寸。

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

5.文本操作。

　　此操作是对元素中的text或者html进行操作。

html：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

获取值：

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

例子：

<form>
    <p>username:<input type="text" id="d1"><span class="error">1</span></p>
    <p>password:<input type="password" id="d2"><span class="error">1</span></p>
    <input type="submit" value="提交" id="d3">

</form>
<script>
    var subEle = document.getElementById('d3');
    subEle.onclick = function () {
        var useEle = $('#d1').val();
        var pwdEle = $('#d2').val();
        if (useEle.length === 0){
            $('.error').first().text('没有值')
            return false
        }
        if (pwdEle.length === 0){
            $('.error').last().text('没有值')
            return false
        }
    }

</script>

设置值

5.属性操作：

　　在jQurry中，加参数就是设置值不爱参数就是回去值。

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

　　使用attr对标签元素中的属性和值进行增加和修改。

　　对于checkbox和radio有特殊的方法识别其中的属性：

prop() // 获取属性
removeProp() // 移除属性

区别：

　　它们虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

　　总结：

1. 对于标签上有的能看到的属性和自定义属性都用attr
2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。（prop看不到自定义属性。）

五。文档处理

　　这一系列可以操作将一个元素添加到某元素的相对位置里：
　　添加到指定元素内部的后面：

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

　　添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

　　添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

　　添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

　　移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

　　克隆：

　　clone（）将该元素克隆一份一样的。如果（）中有true，可以克隆其中的标签。

<form>
    <input type="button" value="克隆" id="d1">
</form>
<script>
  $("#d1").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>

克隆例子

六。事件。

jQuery绑定事件有两种方式

1.

$(选择器).事件名(function(){

事件代码

})

eg:$('button').click(function(){

alert(123)

})

2.

$(选择器).on(事件名,function(){

事件代码

})

$('button').on('click',function(){

alert(123)

})

　　常用事件有：

click(function(){...}) //点击事件
hover(function(){...}) //悬浮事件
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

　　其中hover中事件可以写两个函数，第一个函数是鼠标悬浮上去时运行的函数，而第二个函数是鼠标离开时的函数。

　　如果只写一个函数，离开和悬浮都执行改函数。

　　input实时监听：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">

<script src="jquery-3.2.1.min.js"></script>
<script>
  /*
  * oninput是HTML5的标准事件
  * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
  * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
  * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
  * 使用jQuery库的话直接使用on同时绑定这两个事件即可。
  * */
  $("#i1").on("input propertychange", function () {
    alert($(this).val());
  })
</script>
</body>
</html>

input值变化事件

实时监听

2.阻止事件发生。

　　当我们使用submit绑定点击事件时，绑定后 的事件发生后，会继续刷新页面，要想阻止这个事件继续发生需要用一些函数，或者函数返回false停止事件的运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件</title>
</head>
<body>

<form action="">
    <button id="b1">点我</button>
</form>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
</script>
</body>
</html>

3.阻止事件冒泡

　　当一个div设置了点击事件后，其父标签和其父父标签都会发生点击事件，需要解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡</title>
</head>
<body>
<div>
    <p>
        <span>点我</span>
    </p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
</script>
</body>
</html>

　　总结：

　　使用e.stopPropagation();可以阻止事件的发生。

4.事件委托。

　　在body中，所有按钮事先绑定了一些事件后，当js动态添加了按钮后，这些按钮是不会触发点击事件的，要想实现这一功能，需要进行事件委托。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件（委托范围） （事件名）  （委托谁） （事件函数）
})

5.页面加载。

页面加载
第一种
$(document).ready(function(){
// 在这里写你的JS代码...
})
第二种

$(function(){
// 你在这里写你的代码
})
第三种
直接写在body内最下方

可以参照

http://www.ruanyifeng.com/blog/2011/07/jquery_fundamentals.html