如何查看一个网站的浏览量,为什么我的网站在百度搜不到,网站接入服务 公司,网站如何做api接口1、jQuery的使用方式
1、下载jQuery库文件 网址 2、将下载好的js文件放到项目中#xff0c;并引入到需要的HTML文件中 3、使用jQuery 注意#xff1a;jQuery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。
!DOCTYPE html
html langen…1、jQuery的使用方式
1、下载jQuery库文件 网址 2、将下载好的js文件放到项目中并引入到需要的HTML文件中 3、使用jQuery 注意jQuery库文件的导入必须在自己写的代码之前。就绪函数在页面上可以写n个。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlescript srcjs/jquery-3.6.3.js/scriptscript//就绪函数当页面加载完成以后自动执行的函数$(function(){var demo document.getElementById(test);console.log(demo.innerText);});/script
/head
bodydiv idtest这是DIV/div
/body
/htmlDOM对象与jQuery对象
DOM对象就是通过原生JavaScript方法获取到的对象就是DOM对象。
jQuery对象就是通过jQuery方法获取的对象。
jQuery对象和DOM对象可以进行相互转换但是切记两种对象的属性和函数不能彼此混搭使用
DOM对象转jQuery对象语法jQuery(DOM对象); 或 $(DOM对象);
jQuery对象转DOM对象语法jQuery对象[index]; 或 jQuery对象.get(index);
!DOCTYPE html
html langen
headmeta 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
bodydiv idtest这是DIV/div
/body
/html2、jQuery选择器
1、基本选择器
使用最多的选择器分别是标签选择器ID选择器类选择器全局选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlescript 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
bodydiv第一个DIV/divdiv idtest第二个DIV/divdiv第三个DIV/divdiv classtest第四个DIV/divp classtest第一个P/p
/body
/html2、层次选择器 根据元素与元素之间的关系来查找元素分别是后代选择器 子元素选择器同辈元素选择器~同辈相邻元素选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlescript 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
bodyspan这是out前面的span/spandiv idoutspan这是out里面的span/spanpspan这是out里面的p里面的span/span/p/divspan这是out后面的span/spanspan这是out后面的span再后面的span/spanp这是out后面的后面的的P/p
/body
/html3、jQuery属性操作
prop()
prop(“属性名”);获取指定属性的值。
prop(“属性名”,”属性值”);设置指定属性的值。
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlescript srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#all).click(function(){var checkedValue $(this).prop(checked);$([namehobby]).prop(checked,checkedValue);});});/script
/head
bodyinput typecheckbox idall全选brinput typecheckbox namehobby篮球brinput typecheckbox namehobby足球brinput typecheckbox namehobby排球brinput typecheckbox namehobby乒乓球br
/body
/html4、jQuery样式操作
1、css(“样式名”,”样式值”);或css({“样式名1”:”样式值1”,“样式名2”:”样式值2”});
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle#test{width: 100px;height: 100px;background-color: red;}/stylescript srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#css).click(function(){$(#test).css({width:200px,height:200px,background-color:yellow});});});/script
/head
bodydiv idtest/divinput typebutton valuecss idcss
/body
/html5、jQuery内容操作
html();设置或返回所选元素的内容包括 HTML 标记相当于JS的innerHTML
text();设置或返回所选元素的文本内容相当于JS的innerText
val();设置或返回表单域的值相当于JS的value
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlescript 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
bodydiv idtesth1这是DIV/h1/divinput typetext idusername value陈微brinput typebutton valuehtml idhtmlinput typebutton valuetext idtextinput typebutton valueval idval
/body
/html6、jQuery文档操作
$();创建标签
append();在指定的标签中后置添加
prepend();在指定的标签中前置添加
after();在指定标签的后面添加
before();在指定标签的前面添加
remove();移除指定标签
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlescript srcjs/jquery-3.6.3.js/scriptscript$(function(){$(#btn).click(function(){//创建一个能够跳转到B站的超链接var newEle $(a 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
bodydiv idtest stylebackground-color: red;h1这是DIV/h1/divinput typebutton value测试 idbtn
/body
/html7、jQuery动画
显示与隐藏
show(time,function);显示
hide(time,function);隐藏
toggle(time,function);在显示与隐藏之间相互切换
time显示与隐藏的时间单位是毫秒
function回调函数。显示与隐藏完毕之后自动调用的函数。
两个参数都是可选参数。
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlescript 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
bodyinput typebutton valueshow idshowinput typebutton valuehide idhideinput typebutton valuetoggle idtogglebrimg srcimg/gouza.png width300 idimg
/body
/html8、bootstrap使用方式
在HTML文件中引入对应的bootstrap文件注意bootstrap.js是基于jQuery的所以要先引入jQuery
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, 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
/head
bodyh1你好世界/h1
/body
/html
