电商网站的分辨率被忽悠去做网销了

当前位置： 首页 > news >正文

电商网站的分辨率,被忽悠去做网销了,如何使用wordpress,网站的目录怎样做的JQuery
W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: jQuery是⼀个快速、简洁且功能丰富的JavaScript框架#xff0c;原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象#xff0c;如
• ⽹⻚内容
• ⽹⻚结构
…JQuery
W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: jQuery是⼀个快速、简洁且功能丰富的JavaScript框架原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们学习使⽤JQuery来操作⻚⾯对象如
• ⽹⻚内容
• ⽹⻚结构
• ⽹⻚样式
1 引⼊依赖
使⽤JQuery需要先引⼊对应的库
在使⽤jQuery CDN时只需要在HTML⽂档中加⼊如下代码 script srchttps://code.jquery.com/jquery-3.7.1.min.js/script 参考地址: https://releases.jquery.com/
其中 src 属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库
提供的⼀个统⼀资源定位符.
如果需要使⽤其他版本的JQuery, 可以在官⽹进⾏下载 1 我们一般使用minified uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)
minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)
slim: 精简瘦⾝版, 没有Ajax和⼀些特效
slim minified : slim 的压缩版 .2 JQuery 语法
jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作
基础语法
1 \((selector).action() 事件源.事件操作对象 \)() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
• Selector 选择器, ⽤来查询和查找 HTML 元素
• action 操作, 执⾏对元素的操作 button typebutton点我消失/buttonscript srchttps://code.jquery.com/jquery-3.7.1.min.js/scriptscript\((document).ready(function(){\)(button).click(function(){\((this).hide();});});/script 3 JQuery 选择器 我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作. JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器. jQuery 中所有选择器都以 \) 开头$(). 4 JQuery事件
JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.
⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏
更复杂的交互操作.
浏览器就是⼀个哨兵, 在侦查敌情(⽤⼾⾏为). ⼀旦⽤⼾有反应(触发具体动作), 哨兵就会点燃烽⽕台的
狼烟(事件), 后⽅就可以根据狼烟来决定下⼀步的对敌策略.
事件由三部分组成:

1. 事件源: 哪个元素触发的
   
2. 事件类型: 是点击, 选中, 还是修改?
   
3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数 例如: 某个元素的点击事件: \((p).click(function(){ //动作发⽣后执⾏的代码 }); 5 操作元素 5.1 获取/设置元素内容 三个简单的获取元素内容的JQuery⽅法 这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容. 有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取. 代码⽰例: 获取元素内容: div idtestspan你好/span/divinput typetext valuehelloscript\)(document).ready(function () {var html \((#test).html();console.log(html内容为:html);var text \)(#test).text();console.log(⽂本内容为:text);var inputVal \((input).val();console.log(inputVal);});/script 设置元素内容 div idtest/divdiv idtest2/divinput typetext valuescript\)(document).ready(function () {\((#test).html(h1设置html/h1);\)(#test2).text(h1设置text/h1);\((input).val(设置内容);});/script 3.4.5.2 获取/设置元素属性 JQuery attr() ⽅法⽤于获取属性值. 代码⽰例 获取元素属性 pa hrefhttps://www.bitejiuyeke.com/index idbitezhuzhu/a/pscript\)(function(){var href \((p a).attr(href)console.log(href);});/script 设置元素属性 pa hrefhttps://www.bitejiuyeke.com/index idbitezhuzhu/a/pscript\)(function(){\((p a).attr(href,baidu.com)console.log(\)(p a).attr(href));});/script 3.4.5.3 获取/返回css属性
   css() ⽅法设置或返回被选元素的⼀个或多个样式属性
   代码⽰例
   获取元素属性
   div stylefont-size: 36px;我是⼀个⽂本/divscript\((function(){var fontSize \)(div).css(font-size);console.log(fontSize);});/script 设置元素属性
   div stylefont-size: 36px;我是⼀个⽂本/divscript\((function(){\)(div).css(font-size,24px);});/script 5.4 添加元素
   添加 HTML 内容
   
4. append() : 在被选元素的结尾插⼊内容
   
5. prepend() : 在被选元素的开头插⼊内容
   
6. after() : 在被选元素之后插⼊内容
   
7. before() : 在被选元素之前插⼊内容
   代码⽰例:
   olliList item 1/liliList item 2/liliList item 3/li/olimg srcpic/rose.jpgscript\((function () {\)(ol).append(liappend/li);\((ol).prepend(liprepend/li);\)(img).before(图⽚前插⼊);$(img).after(图⽚后插⼊);});/script 5.5 删除元素
   删除元素和内容⼀般使⽤以下两个 jQuery ⽅法
   
8. remove() : 删除被选元素及其⼦元素
   
9. empty() : 删除被选元素的⼦元素。
   代码⽰例:
   div iddiv1我是⼀个div/divbutton删除 div 元素/buttonscript\((function () {\)(button).click(function(){\((#div1).remove();});});/script删除被选元素的⼦元素olliList item 1/liliList item 2/liliList item 3/li/olbutton删除列表元素/buttonscript\)(function () {\((button).click(function(){\)(ol).empty();});});/script 表白墙 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.container {width: 400px;margin: 0 auto;}h1 {text-align: center;padding: 20px 0;}p {color: #666;text-align: center;font-size: 14px;padding: 10px 0;}.row {height: 40px;display: flex;justify-content: center;align-items: center;}span {width: 100px;line-height: 40px;}.edit {width: 200px;height: 30px;}.submit {width: 304px;height: 40px;color: white;background-color: orange;border: none;}/style/headbodydiv classcontainerh1表⽩墙/h1p输⼊后点击提交, 会将信息显⽰在表格中/pdiv classrowspan谁: /spaninput classedit typetext/divdiv classrowspan对谁: /spaninput classedit typetext/divdiv classrowspan说什么: /spaninput classedit typetext/divdiv classrowinput typebutton value提交 classsubmit/div/div/body/html\((function () {// 给点击按钮注册点击事件\)(.submit).click(function () {// 1. 获取到编辑框内容var from  \((.edit:eq(0)).val();var to \)(.edit:eq(1)).val();var message $(.edit:eq(2)).val(); });});