Contoh dalam artikel ini menerangkan operasi jQuery pada elemen, termasuk operasi asas, memilih elemen untuk dikendalikan dan memproses elemen DOM. Ia mempunyai nilai rujukan yang baik untuk mempelajari jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:
1. Asas
set objek jquery:
$(): koleksi objek jquery
Dapatkan elemen dalam set objek jquery:
Dapatkan elemen javascript dalam pembungkus menggunakan indeks:
var temp = $('img[alt]')[0]
Gunakan kaedah get jquery untuk mendapatkan elemen javascript dalam set objek jquery:
var temp = $('img[alt]').get(0)
Gunakan kaedah eq jquery untuk mendapatkan elemen objek jquery dalam set objek jquery:
$('img[alt]').eq(0)
$('img[alt]').first()
$('img[alt]').last()
Tukar set objek jquery kepada tatasusunan javascript:
var arr = $('label+button').toArray()
Semua elemen butang pada tahap yang sama di belakang label ditukar kepada tatasusunan JavaScript
Indeks set objek jquery:
var n = $('img').index($('img#id')[0]) Nota: Parameter index() ialah elemen javascript
var n = $('img').index('img#id') adalah bersamaan dengan baris sebelumnya Jika tidak dijumpai, mengembalikan -1
var n = $('img').index() mendapat indeks img dalam elemen tahap yang sama
Tambah lebih banyak set objek jquery pada set objek jquery:
Gunakan koma:
$('img[alt],img[title]')
Gunakan kaedah tambah:
$('img[alt]').add('img[title]')
Ambil kaedah berbeza untuk objek jquery yang berbeza:
$('img[alt]').addClass('thickBorder').add('img[title]').addClass('');
Tambah elemen yang baru dicipta pada set objek jquery:
$('p').add('<div></div>');
Padam elemen daripada set objek jquery:
$('img[title]').not('[title*=pu]') $('img').not(function(){return !$(this).hasClass('someClassname')})
Tapis set objek jquery:
$('td').filter(function(){return this.innerHTML.match(^d $)}) menapis td
Dapatkan subset set objek jquery
$('*').slice(0,4) Satu set objek jquery baharu yang mengandungi 4 elemen pertama
$('*').slice(4) Satu set objek jquery baharu yang mengandungi 4 elemen pertama
$('div').has('img[alt]')
Tukar elemen dalam set objek jquery:
var allIds = $('div').map(function(){ return (this.id==undefined) ? null : this.id; }).get();
Contoh di atas boleh ditukar kepada tatasusunan javascript melalui kaedah get.
Lintas elemen dalam set objek jquery:
$('img').each(function(n){ this.alt = '这是第['+n+']张图片,图片的id是' + this.id; }) $([1,2,3]).each(function(){alert(this);})
Dapatkan satu set objek jquery menggunakan perhubungan antara elemen:
$(this).closest('div') Contohnya, div mana butang yang dicetuskan berlaku
$(this).siblings('button[title="Close"]')Semua elemen adik-beradik, tidak termasuk dirinya
$(this).children('.someclassname')Semua elemen nod anak, tidak termasuk nod anak pendua
$(this).closest('') adalah hampir dengan unsur moyang
$(this).contents() ialah set objek jquery yang terdiri daripada kandungan elemen Sebagai contoh, anda boleh mendapatkan kandungan elemen
$(this).find(p span)
var hasImg = $('*').is('img');
$().sembunyikan()
$().addClass('')
$().html('')
$('a').size()Bilangan elemen
$('p:even')
$('tr:nth-child(1)')
$('body > div') elemen anak langsung
$('a[href=$='pdf']')Pilih mengikut atribut
$(div:mempunyai(a)) penapis
$.trim()
masa pelaksanaan jquery:
$(document).ready(function(){});
$(function(){});
$('<p></p>').insertAfter(); $('<img alt="Tutorial asas jQuery untuk mengendalikan pelbagai elemen_jquery" >',{ src: '', alt: '', title: '', click: function(){} }).css({ cursor:'pointer', border:'', padding:'', backgroundColor:'white' }).append('');
$.fn.disable = function(){ return this.each(function(){ if(this.disabled != null) this.disabled = true; }) }; $('').disable();
jquery测试元素是否存在:
if(item)(){}else{} 宽松测试
if(item != null) 推荐测试,能把null和undefined区别开
2、选择要操作的元素
根据标签名:$('a')
根据id:$('#id')
根据类名:$('.someclassname')
满足多个条件:$('a#id.someclassname') 或 $('div,span')
某个元素的所有子节点:$(p a.someclassname)
某个元素的直接子节点:$(ul.myList > li)
根据属性名:
$(a[href^='http://']) 以...开头
$(href$='.pdf')以...结尾
$(form[method])包含method属性的form
$(intput[type='text'])
$(intput[name!=''])
$(href*='some')包含
某元素后的第一个元素:$(E+F)匹配的是F,F是E后面的第一个元素
某元素后的某一个元素:$(E~F)匹配的是F,F是E后面的某一个元素
通过位置:
$(li:first)第一个li
$(li:last)最后一个li
$(li:even)偶数行li
$(li:odd)奇数行li
$(li:eq(n))第n个元素,索引从0开始
$(li:gt(n))第n个元素之后的元素,索引从0开始
$(li:lt(n))第n个元素之前的元素,索引从0开始
$(ul:first-child)列表中的第一个li
$(ul:last-child)列表中的最后一个li
$(ul:nth-child(n))列表中的第n个li
$(ul:only-child)没有兄弟li的ul
$(ul:nth-child(even))列表中的偶数行li,odd为计数行li
$(ul:nth-child(5n+1))列表中被5除余1的li
通过过滤器:
$(input:not(:checkbox))
$(':not(img[src*="dog"])')
$('img:not([src*="dog"])')
$(div:has(span))
$('tr:has(img[src$="pu.png"])')
$(tr:animated)处于动画状态的tr
$(input:button)包括type类型为button,reset,submit的Input
$(input:checkbox)等同于$(input[type=checkbox])
$(span:contains(food))包含文字food的span
$(input:disabled)禁用
$(input:enabled)启用
$(input:file)等同于$(input[type=file])
$(:header)h1到h6
$(input:hidden)
$(input:image)等同于$(input[type=image])
$(:input)包括input, select, textarea, button元素
$(tr:parent)
$(input:password)等同于$(input[type=password])
$(input:radio)等同于$(input[type=radio])
$(input:reset)等同于$(input[type=reset])或$(button[type=reset])
$('.clssname:selected')
$(input:submit)等同于$(input[type=submit])或$(button[type=submit])
$(input:text)等同于$(input[type=text])
$(div:visible)
3、处理DOM元素
操作元素的属性:
$('*').each(function(n){ this.id = this.tagName + n; })
获取属性值:
$('').attr('');
设置属性值:
$('*').attr('title', function(index, previousValue){ return previousValue + ' I am element ' + index + ' and my name is ' + this.id; }) //为一个属性设置值 $('input').attr({ value: '', title: '' }); //为多个属性设置值
删除属性:
$('p').removeAttr('value');
让所有链接都在新窗口中打开:
$('a[href^="http://"]').attr('target',"_blank");
避免表单多次提交:
$("form").submit(function(){ $(":submit", this).attr("disabled","disabled"); })
添加类名:
$('#id').addClass('')
删除类名:
$('#id').removeClass('')
切换类名:
$('#id').toggleClass('')
存在就删除类名,不存在就添加类名
判断是否含有类名:
$('p:first').hasClass('') $('p:first').is('')
以数组形式返回类名列表:
$.fn.getClassNames = function(){ var name = this.attr('someclsssname'); if(name != null){ return name.split(" "); } else { return []; } }
设置样式:
$('div.someclassname').css(function(index, currentWidth){ return currentWidth + 20; }); $('div').css({ cursor: 'pointer', border: '1px solid black', padding: '12px 12px 20px 20x', bacgroundColor: 'White' });
有关尺寸:
$(div).width(500)
$('div').height()
$('div').innerHeight()
$('div').innerWidth()
$('div').outerHeight(true)
$('div').outerWidth(false)
有关定位:
$('p').offset()相对于文档的参照位置
$('p').position()偏移父元素的相对位置
$('p').scrollLeft()水平滚动条的偏移值
$('p').scrollLeft(value)
$('p').scrollTop()
$('p').scrollTop(value)
有关元素内容:
$('p').html()
$('p').html('')
$('p').text()
$('p').text('')
追加内容
在元素末尾追加一段html:
$('p').append('<b>some text</b>');
在元素末尾dom中现有的元素:
$('p').append($(a.someclassname))
在元素开头追加:
$("p").prepend()
在元素的前面追加:
$("span").before()
在元素的后面追加:
$("span")after()
把内容追加到末尾:
appendTo(targets)
把内容追加到开头:
prependTo(targets)
把内容追加到元素前面:
insertBefore(targets)
把内容追加到元素后面:
$('<p></p>').insertAfter('p img');
包裹元素:
$('a.someclassname').wrap("
$('a.someclassname').wrap($("div:first")[0])
$('a.someclassname').wrapAll()
$('a.someclassname').wrapInner()
$('a.someclassname').unWrap()
删除元素:
$('.classname').remove()删除元素,绑定到元素上的事件和数据也会被删除
$('.classname').detach()删除元素,但保留事件和数据
$('.classname').empty()不删除元素,但清空元素内容
复制元素:
$('img').clone().appendTo('p.someclassname')
$('ul').clone().insertBefore('#id')
替换元素:
$('img[alt]').each(function(){ $(this).replaceWith('<span>' + $(this).attr('alt') + '</span>'); }) $("p").replaceAll("<b></b>")
关于表单元素的值:
$('[name="radioGroup"]:checked').val()获取单选按钮的值,如果没有选中一个,返回undefined var checkboxValues = $('[name="checkboxGroup"]:checked').map(function(){ return $(this).val(); }).toArray(); //获取多选框的值
对于
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Dreamweaver CS6
Alat pembangunan web visual

SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod

mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
