Dom:
Attribute: 属性
$("p").addClass (CSS で定義されたスタイル タイプ); 要素にスタイルを追加します
$("img").attr({ src: "test.jpg",title:"test Image"}); 要素に属性/値を追加します。パラメータはmap
$("input").attr({"checked", "checked"}です。 );
$("img").attr("title", function() { return this.src }); 要素に属性/値を追加します
$("要素名").html ( ); 要素内のコンテンツ (要素、テキストなど) を取得します
$("要素名").html("新しいもの"); 🎜>$("要素名").removeAttr("属性名") 要素から指定された属性と属性の値を削除します。
$("要素名").removeClass("クラス") 指定された属性を削除します要素からのスタイル
$("要素名").text(); 要素のテキストを取得します
$("要素名").text(value); 要素のテキスト値を value に設定します。
$("要素名").toggleClass(class) パラメータのスタイルに要素が存在する場合はキャンセルします。存在しない場合はこのスタイルを設定します。
$("入力要素名").val( ); 入力要素の値を取得します
$("入力要素名").val(value); 入力要素の値を value
に設定します
$("要素名").after(content); 一致する要素の後にコンテンツを追加します。
$("要素名").append(content); element 要素の後ろに移動します
$("要素名").appendTo(content); 要素
$("要素名").before(content) を追加します
$ ( "要素名").clone(ブール式) ブール式がtrueの場合、要素を複製します(パラメータが無い場合はtrueとして扱われます)
$("要素名").empty() 要素をコピーします 内容空に設定されます
$("要素名").insertAfter(content); コンテンツの後に要素を挿入します
$("要素名").insertBefore(content); コンテンツの前に要素を挿入します$("Element").prepend(content); コンテンツを要素の一部として使用し、要素の前に配置します
$("Element").prependTo(content);コンテンツの先頭に置きます
$("Element").remove(); 指定された要素をすべて削除します
$("Element").remove("exp"); Element
$("Element").wrap("html"); html を使用して要素を囲みます
$("Element").wrap(element); 要素を使用して要素を囲みます
トラバース:
例:
例
$("#div1").find("p").hide().end().hide()
最初の Hide() は p タグ用で、その後は end を使用します() は p タグへの参照を終了し、#div1 タグに戻ります
したがって、2 番目の Hide() は #div1 に対して機能します
end() が追加されない場合、両方の Hide() は p タグに対して機能します
filter(expression)
find(expr)
filter と find の違い:
filter は選択された要素のセットから選択します。
find は選択された要素のセットから選択します。 ;
テスト 2
find() は div 要素内でクラス Rain を持つ要素を検索します。
そして、filter() は、div 内のクラスが Rain である要素をフィルターします。
1 つはそのサブセットを操作することであり、もう 1 つは独自のコレクションの要素をフィルターすることです。
next(expr)//一致した要素セット内の各要素の直後の兄弟要素を含むセットを取得します。
not(el)//フィルタリング要件を満たす要素セットが一致セットにありません
$("div").not(".green, #blueone")
$("input:not(:checked) span")
$('tr:not ([th]):奇数')
parents(expr)// 一致する要素セット内の各要素のすべての祖先要素のセットを取得します
prev( expr) は、一致した要素セット内の各要素の直前の兄弟要素のセットを取得します
siblings(expr) は、一致した要素セット
内の各要素のすべての兄弟要素のセットを取得します
$(html).appendTo("body") は、本文
$(elems) に HTML コードを記述して DOM 上の要素を取得するのと同じです
$( function( ){……..}); 関数を実行します
$("div > p").css("border", "1px plain grey"); すべての div の子ノード p を見つけて追加します。スタイル
$("input:radio", document.forms[0]) 現在のページの最初のフォームにあるラジオ ボタンをすべて検索します
jQuery には、プラグインを開発するための 2 つのメソッドが用意されています。
jQuery .extend(object) は、jQuery クラス自体を拡張し、新しいメソッドをクラスに追加します。
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery を引用:
例
コードは次のとおりです:
$("スパン") .click(function){$("li").each(function(){
$(this).toggleClass("example");
ready(fn); $(document).ready() 本体に onload イベントがないことに注意してください。そうでない場合、関数は実行できません。各ページでは多くの関数をロードして実行でき、fn の順序で実行されます。
例:
$(document).ready(function(){alert("aa");}
bind( type, [data], fn ) は、1 つ以上のイベント ハンドラー関数を、一致する各要素の特定のイベント (クリックなど) にバインドします。可能なイベント タイプ属性は次のとおりです:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error
例 1:
$('#myBtn').bind("click",function(){
alert('click');
});
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "バー"}、ハンドラー)
type(String): イベントのタイプ。
data(Object): (オプション)event.data プロパティ値としてイベント オブジェクトに渡される追加のデータ オブジェクト。
fn(Function): 一致した各要素のイベントにバインドされたハンドラー関数。
$("p").click( function (event, a, b) {
// 通常のクリック イベントでは、a と b は未定義の型です
// 次のステートメントでトリガーされた場合、次に、 a は "foo" を指し、 b は "bar"
を指します。 ).trigger("click", ["foo", "bar"]); 一致する要素がクリックされた場合、 toggle( fn, fn );指定された最初の機能がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の機能がトリガーされます。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this) .removeClass("selected");
}
);
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 ' ' message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
triggerHandler( type, [data] ) この特定のメソッドは、特定のイベント (指定されたイベント タイプ) をトリガーします。 、このイベントに対するブラウザのデフォルトのアクションをキャンセルしながら、
unbind( [type], [data] ) バインドを解除し、一致する各要素からバインドされたイベントを削除します。
$("p").unbind() はすべての段落のすべてのバインドされたイベントを削除します
$("p").unbind( "click" ) はすべての段落のクリック イベントを削除します
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this) .addClass("out");
}
);
元素事件列表说明
注：不带参数的函数，其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件描述，支持元素或对象
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
$("#in").focus(function(){
if($("#in").val()=='关键字'){
$("#in").val("")};
}).blur(function(){
if($("#in").val()==''){
$("#in").val("关键字").css("color","#ccc")};
});
change( ) 用户改变域的内容 input, textarea, select
change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
JQuery Ajax 方法说明:
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后，执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("
ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop( callback ) 当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时，隐藏loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback ) 当一个AJAX请求成功完成后，执行一个函数。这是一个Ajax事件
当AJAX请求成功完成时，显示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("
jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。
从form中取得一组值，显示出来
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
JQuery Effects 方法说明
show( ) 显示隐藏的匹配元素。
show( speed, [callback] ) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以
"滑动"的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以"滑动"的方式隐藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。
JQuery Traversing 方法说明
eq( index ) 从匹配的元素集合中取得一个指定位置的元素，index从0开始
filter( expr ) 返回与指定表达式匹配的元素集合，可以使用","号分割多个expr，用于实现多个条件筛选.
ilter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
is( expr ) 用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的
表达式就返回true。
map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。
add( expr ) 把与表达式匹配的元素添加到jQuery对象中。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点，不包括文本节点)，如果元素为iframe，则取得其中的文档元素
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素，添加border类属性。取得所有div元素中的p元素，
添加background类属性
$("div").find("p").andSelf().addClass("border");
$("div").find("p").addClass("background");
end( ) 结束当前的操作，回到当前操作的前一个操作
找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性
$("p").find("span").end().css("border", "2px red solid");
JQuery Selectors选择器方法说明
基本选择器
$("#myDiv") 匹配唯一的具有此id值的元素
$("div") 匹配指定名称的所有元素
$(".myClass") 匹配具有此class样式值的所有元素
$("*") 匹配所有元素
$("div,span,p.myClass") 联合所有匹配的选择器
层叠选择器
$("form input") 后代选择器，选择ancestor的所有子孙节点
$("#main > *") 子选择器，选择parent的所有子节点
$("label + input") 临选择器，选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器
$("tr:first") 匹配第一个选择的元素
$("tr:last") 匹配最后一个选择的元素
$("input:not(:checked) + span")从原元素集合中过滤掉匹配selector的所有元素（这里有是一个临选择器）
$("tr:even") 匹配集合中偶数位置的所有元素(从0开始)
$("tr:odd") 匹配集合中奇数位置的所有元素(从0开始)
$("td:eq(2)") 匹配集合中指定位置的元素(从0开始)
$("td:gt(4)") 匹配集合中指定位置之后的所有元素(从0开始)
$("td:gl(4)") 匹配集合中指定位置之前的所有元素(从0开始)
$(":header") 匹配所有标题
$("div:animated") 匹配所有正在运行动画的所有元素
内容过滤选择器
$("div:contains('John')") 匹配含有指定文本的所有元素
$("td:empty") 匹配所有空元素(只含有文本的元素不算空元素)
$("div:has(p)") 从原元素集合中再次匹配所有至少含有一个selector的所有元素
$("td:parent") 匹配所有不为空的元素(含有文本的元素也算)
$("div:hidden") 匹配所有隐藏的元素，也包括表单的隐藏域
$("div:visible") 匹配所有可见的元素
属性フィルターセレクター
$("div[id]") は、指定された属性を持つすべての要素と一致します
$("input[name='newsletter']") は、指定された属性値を持つすべての要素と一致します
$("input[name!='newsletter']") は、指定された属性値を持たないすべての要素に一致します
$("input[name^='news']") は、指定された属性値を持つすべての要素に一致しますvalue で終わる属性値
$("input[name$='letter']") で始まる要素は、指定された値
$("input[name*='man']") で終わるすべての属性値と一致します。 ") 指定されたすべての要素に一致します。属性値に値文字が含まれる要素
$("input[id][name$='man']") は、同時に複数のセレクターに一致するすべての要素に一致します
子要素フィルターセレクター
$("ul li:nth-child(2)"),
$("ul li:nth-child(odd)")、親の n 番目の要素と一致します要素 子要素
$("ul li:nth-child(3n 1)")
$("div span:first-child") は親要素の最初の子要素と一致します
$("div span:last-child") は親要素の最後の子要素と一致します
$ (" div button:only-child") は、親要素の唯一の子要素
フォーム要素セレクター
$(":input") は、すべてのタイプの入力、テキストエリア、選択、ボタンを含む、すべてのフォーム入力要素に一致します
$(":text") は、すべてのタイプのテキストに一致します要素
$(":password") は、パスワード型のすべての入力要素に一致します
$(":radio") は、ラジオ型のすべての入力要素に一致します
$(":checkbox") は、次のすべての入力要素に一致しますtype checkbox
$(":submit") タイプ submit のすべての入力要素に一致します
$(":image") タイプ image のすべての入力要素に一致します
$(":reset") はすべての入力要素に一致しますリセット型の
$(":button") はボタン型のすべての入力要素に一致します
$(":file") はファイル型のすべての入力要素に一致します
$(":hidden") はすべての入力に一致しますタイプ
フォーム要素フィルターセレクター
$(":enabled") は、操作可能なすべてのフォーム要素に一致します
$(":disabled") は、操作できないすべてのフォーム要素に一致します
$(":checked ") は、選択されたすべての要素に一致します要素
$("select option:selected") は、選択されたすべての要素
JQuery CSS メソッドの説明
css( name ) は、最初に一致した要素の style 属性にアクセスします。
css(properties) 「名前と値のペア」オブジェクトを、一致するすべての要素のスタイル プロパティとして設定します。
$("p").hover(function () {
$(this).css({ backgroundColor:" yellow", fontWeight:"bolder" });
}, function () {
var cssObj = {
backgroundColor: "#ddd",
fontWeight: "",
color: "rgb(0,40,244)"
}
$(this)。 css(cssObj);
});
css( name, value ) 一致するすべての要素にスタイル属性の値を設定します。
offset( ) は、現在のビジュアル ウィンドウを基準とした最初に一致した要素の位置を取得します。返されたオブジェクトには
top と left という 2 つの属性があり、属性値は整数です。この関数は、表示されている要素に対してのみ使用できます。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " offset.left ", top: " offset.top ) ;
width() は、現在最初に一致する要素の幅の値を取得し、
width( val ) は、一致する各要素に指定された幅の値を設定します。
height( ) は、現在最初に一致する要素の高さの値を取得し、
height( val ) は、一致する各要素に指定された高さの値を設定します。
JQuery Utilities メソッドの説明
jQuery.browser
.msie は、つまり、
jQuery.browser.version はユーザーのブラウザのバージョン情報を読み取ります
jQuery.boxModel はユーザーのブラウザのバージョンを検出します現在のページ W3C CSS ボックスに基づいているかどうかを表示します。 model
jQuery.isFunction( obj ) 渡されたパラメータが function
function stub() であるかどうかを確認します。 { }
var objs = [
function () {},
{ x:15, y:20 },
null,
スタブ,
"関数"
];
jQuery.each(objs, function ( i) {
var isFunc = jQuery.isFunction(objs[i]);
$("span:eq( " i ")").text(isFunc);
});
jQuery.trim( str ) 文字列の両端から空白を削除します。正規表現を使用して、指定された文字の両端から空白を削除します。
jQuery.each( object, callback ) シームレスに反復処理するために使用できる一般的なイテレータです。オブジェクトと配列
jQuery.extend(target, object1, [objectN]) は、オブジェクトを拡張し、元のオブジェクトを変更して返します。これは、プロトタイプの代わりに値を渡すことによって実装される強力な継承ツールです。 JavaScriptのチェーンメソッドで。
設定オブジェクトとオプション オブジェクトをマージし、変更された設定オブジェクトを返します
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "バー" };
jQuery.extend(設定, オプション);
デフォルト オブジェクトとオプション オブジェクトをマージします。デフォルト オブジェクトは変更されていません。 options オブジェクトの値は、defaults オブジェクトの値の代わりに空に渡されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
