!DOCTYPE

注意jQuery库文件的导入必须在自己写的代码之前。

就绪函数在页面上可以写n个。

!DOCTYPE

charsetUTF-8titleDocument/titlescript

srcjs/jquery-3.6.3.js/scriptscript//就绪函数当页面加载完成以后自动执行的函数$(function(){var

demo

document.getElementById(test);console.log(demo.innerText);});/script

/head

DOM对象就是通过原生JavaScript方法获取到的对象就是DOM对象。

jQuery对象和DOM对象可以进行相互转换但是切记两种对象的属性和函数不能彼此混搭使用

$(DOM对象);

jQuery对象转DOM对象语法jQuery对象[index];

jQuery对象.get(index);

charsetUTF-8titleDocument/titlescript

srcjs/jquery-3.6.3.js/scriptscript//就绪函数当页面加载完成以后自动执行的函数$(function(){var

demo1

document.getElementById(test);console.log(demo1.innerText);//使用jQuery来获取id为test的标签的内容//使用js方式获取的对象叫做js对象使用jQuery获取的对象叫做jQuery对象var

demo2

$(#test);console.log(demo2.text());//将JS对象转换成jQuery对象console.log($(demo1).text());//将jQuery对象转换成JS对象console.log(demo2[0].innerText);});/script

/head

srcjs/jquery-3.6.3.js/scriptscript$(function(){//获取id为test的标签将其文本颜色改为红色//$(#test).css(color,red);//获取class为test的标签将其文本颜色改为红色//$(.test).css(color,red);//获取所有的div标签将其文本颜色改为红色//$(div).css(color,red);//获取所有的标签将其文本颜色改为红色$(*).css(color,red);});/script

/head

idtest第二个DIV/divdiv第三个DIV/divdiv

classtest第四个DIV/divp

srcjs/jquery-3.6.3.js/scriptscript$(function(){//获取id为out的标签里面的span标签将其背景颜色改为红色//$(#out

span).css(background-color,red);//获取id为out的标签里面的span子标签将其背景颜色改为红色//$(#outspan).css(background-color,red);//获取id为out的标签的后面的同级span标签将其背景颜色改为红色//$(#out~span).css(background-color,red);//获取id为out的标签的后面的同级且相邻span标签将其背景颜色改为红色$(#outspan).css(background-color,red);});/script

/head

idoutspan这是out里面的span/spanpspan这是out里面的p里面的span/span/p/divspan这是out后面的span/spanspan这是out后面的span再后面的span/spanp这是out后面的后面的的P/p

/body

srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#all).click(function(){var

checkedValue

$(this).prop(checked);$([namehobby]).prop(checked,checkedValue);});});/script

/head

1、css(“样式名”,”样式值”);或css({“样式名1”:”样式值1”,“样式名2”:”样式值2”});

!DOCTYPE

charsetUTF-8title/titlestyle#test{width:

100px;height:

srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#css).click(function(){$(#test).css({width:200px,height:200px,background-color:yellow});});});/script

/head

text();设置或返回所选元素的文本内容相当于JS的innerText

!DOCTYPE

srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#html).click(function(){console.log($(#test).html());$(#test).html(a

hrefhttp://www.taobao.com淘宝/a);});$(#text).click(function(){console.log($(#test).text());$(#test).text(a

hrefhttp://www.taobao.com淘宝/a);});$(#val).click(function(){console.log($(#username).val());console.log($(#username).val(mary));});});/script

/head

srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#btn).click(function(){//创建一个能够跳转到B站的超链接var

newEle

hrefhttp://www.bilibili.comB站/a);//将新建的标签放到id为test的标签中的最后//$(#test).append(newEle);//将新建的标签放到id为test的标签中的最前面//$(#test).prepend(newEle);//将新建的标签放到id为test的标签的后面//$(#test).after(newEle);//将新建的标签放到id为test的标签的前面//$(#test).before(newEle);//将id为test的标签删除掉$(#test).remove();});});/script

/head

toggle(time,function);在显示与隐藏之间相互切换

!DOCTYPE

srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#show).click(function(){$(#img).show(1000,function(){alert(显示出来了);});});$(#hide).click(function(){$(#img).hide(1000,function(){alert(隐藏起来了);});});$(#toggle).click(function(){$(#img).toggle(1000,function(){alert(切换了);});});});/script

/head

在HTML文件中引入对应的bootstrap文件注意bootstrap.js是基于jQuery的所以要先引入jQuery

!DOCTYPE

initial-scale1title/titlescript

srcjs/jquery-3.6.3.js/scriptscript

srcbootstrap-3.4.1-dist/js/bootstrap.js/scriptlink

hrefbootstrap-3.4.1-dist/css/bootstrap-theme.css

relstylesheetlink

hrefbootstrap-3.4.1-dist/css/bootstrap.css

relstylesheet