1119クラスの概要

フィルタ

基本フィルタ

:first          // 第一个
:last           // 最后一个

:eq(索引值)      // 索引等于index的那个元素

:even           // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd            // 匹配所有索引值为奇数的元素，从 0 开始计数

:gt(索引值)        // 匹配所有大于给定索引值的元素
:lt(索引值)        // 匹配所有小于给定索引值的元素

:not(元素选择器)  // 移除所有满足not条件的标签
例：$("li:not(.c1)") // 找到所有不包含c1样式类的li标签

:has(元素选择器)  // 保留包含特定后代的元素，去掉那些不含有指定后代的元素
例：$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签

属性フィルタ

[attribute=value]// 属性等于
[attribute!=value]// 属性不等于

例：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

フォームフィルター

// type属性查找
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button



例：$("type:checkbox")  // 找到所有的checkbox
type可省略, 写为$(":checkbox") 

// 表单对象属性
:enabled
:disabled
:checked
:selected

例：$("input:enabled")  // 找到可用的input标签
例：$(":selected")  // 找到所有被选中的option

注： jQueryの、使用$(':checked')ラベルを見つけるために、入力オプションとデフォルト値を使用してそこに返されます。

我々はチェックし、入力に含まれる値を見つけなければならない場合は、条件と組み合わせることができる$("input:checked");か、より精度の高い次のような$(":checkbox:checked");

フィルター方式

前の要素

$("#id").prev()   // 找到括号内id值的上一个同级元素
$("#id").prevAll()  // 找到括号内id值的上面所有同级元素
$("#id").prevUntil("#i2")  // 找到括号内id值 到i2为止的上面所有同级元素,不包括i2

次の要素

$("#id").next()      // 找到括号内id值的下一个同级元素
$("#id").nextAll()       // 找到括号内id值的下面所有同级元素
$("#id").nextUntil("#i2")   // 找到括号内id值 到i2为止的下面所有同级元素,不包括i2

親要素

$("#id").parent()   // 查找当前元素的上一个父辈元素
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil('body') // 找到括号内id值 到body为止的所有父辈元素,不包括body

子孫と兄弟

$("#id").children();// 子代
$("#id").siblings();// 兄弟

求めます

// 搜索所有与指定表达式匹配的元素
$("div").find("p")  // 查找div内的所有p标签

// 等价于
$("div p")

フィルタ

// 筛选出与指定表达式匹配的元素集合
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

// 等价于 
$("div.c1")

サプリメント

// 与表单筛选器类似

.first()    // 获取匹配的第一个元素
.last()     // 获取匹配的最后一个元素

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

ラベルの取り扱い

スタイルの操作

addClass();     // 添加指定的CSS类名
removeClass();  // 移除指定的CSS类名

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


// css操作
css("color","red")

例：$("p").css("color", "red"); //将所有p标签的字体设置为红色

作動位置

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

补充：括号内可以加参数，scrollTop() 比较常用，应用场景：当滚动条距离顶部600px，则显示“回到顶部”按钮

操作の大きさ

// 内部文本宽高
height()
width()

// 内部文本高度+上下padding高度
innerHeight()
// 内部文本宽度+左右padding宽度
innerWidth()

// 内部文本高度+上下padding高度+上下边框高度
outerHeight()
// 内部文本宽度+左右padding宽度+左右边框宽度
outerWidth()

テキストの操作

html()      // 取得元素的html内容
html(val值)  // 设置元素的html内容


text()      // 取得元素的文本内容
text(val值)  // 设置元素的文本内容


val()               // 取得元素的当前值
val(val)            // 设置元素的值
val([val1, val2])   // 设置多选的checkbox、多选select的值


例：设置多选的值
$("[name='hobby']").val(['basketball', 'football']);
例：获取被选中的checkbox的值
$("input[name='gender']:checked").val()

プロパティの操作

// 对于标签上有的能看到的属性和自定义属性都用attr

attr(attrName)// 返回匹配元素的属性值
attr(attrName, attrValue)// 为匹配元素设置一个属性值

attr({k1: v1, k2:v2})// 为匹配元素设置多个属性值
removeAttr()// 从匹配的元素中删除一个属性




// 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

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

注：互換性の理由から、チェックボックス、ラジオ操作では、特定の使用するためにprop()動作します。

しかし3.xのバージョン、removeProp()あなたが要素を削除するときに有効ではない可能性があり、使用しようとするprop()など、

使用するprop()属性のチェックボックスを追加する操作を

$('input').first().prop('checked','checked')

使用prop()の削除属性のチェックボックス
$('input').first().prop('checked',false)

ドキュメントアクション

指定された要素に追加の内側後者

$(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()         // 删除匹配的元素集合中所有的子节点。

置き換えます

replaceWith()
replaceAll()

クローン

clone()     // 参数

イベント

一般的なイベント

click(function(){...})      // 单击
hover(function(){...})      // 光标悬浮
blur(function(){...})       // 失去焦点
focus(function(){...})      // 获得焦点
change(function(){...})     // 域内容变化
keyup(function(){...})      // 键盘某个键按下后松开
input(function(){...})      // 实时监听input框

イベントバインディング

最初の文法構造：

$(选择器).事件名(function(){
    // 事件代码
})

2番目の構文構造（普及）

$(选择器).on('事件名',function(){
    // 事件代码
})

削除イベント

.off( events [, selector ][,function(){}])

後発事象の実施を防ぎます

最初の方法

return false

例：
$("#b1").click(function (e) {
        alert(123);
        return false;
    });

第二の方法

e.preventDefault()

例：
$("#b1").click(function (e) {
        alert(123);
        e.preventDefault();
    });

停止イベントバブリング

イベントをバブリングすることは上向きの親をトリガするイベントをクリックして、子ノードをクリックで、祖父ノード

e.stopPropagation();

例：
$("内层某节点").click(function (e) {
        alert(123);
        e.stopPropagation();
    });

ページのロード

// 方式一
$(document).ready(function(){
    // JS代码...
})


//方式二
$(function(){
    // JS代码...
})

イベントのデリゲート

イベントデリゲートは、イベントのサブラベルをキャプチャするために、親タグを使用して、イベントバブリングの原則を介して行われ

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})