如何做Google外贸网站网站建设前期调研公司汇报

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

如何做Google外贸网站,网站建设前期调研公司汇报,福建省建设继续教育网站,研究生院 网站 建设jQuery的DOM操作 1.jQuery操作内容 jQuery操作内容 1. text() 获取或修改文本内容 类似于 dom.innerText 2. html() 获取或修改html内容 类似 dom.innerHTML 注意: 1. text() 是获取设置所有 2. html() 是获取第一个,设置所有 !DOCTYPE html html langzh…jQuery的DOM操作 1.jQuery操作内容 jQuery操作内容 1. text() 获取或修改文本内容 类似于 dom.innerText 2. html() 获取或修改html内容 类似 dom.innerHTML 注意: 1. text() 是获取设置所有 2. html() 是获取第一个,设置所有 !DOCTYPE html html langzh headmeta charsetUTF-8title13-jquery操作内容/title!–引入Jquery库文件–script typetext/javascript srcjs/jquery-1.8.3.js /script /head body spanspan1/span spanspan2/span spanspan3/span divdiv1br//div divdiv2br//div divdiv3br//div ​ script//获取所有spanvar \(span \)(span);//获取所有divvar \(div \)(div); ​// 1.获取纯文本内容console.log(\(span.text());//获取所有span中的文本:span1span2span3console.log(\)div.text());//获取所有div中的文本:div1div2div3// 2.获取html内容console.log(\(span.html());//只能获取第一个标签体:span1console.log(\)div.html());//只能获取第一个标签体:div1br/// 3.设置纯文本内容\(span.text(h1h1标题标签/h1);//设置为文本内容\)div.text(h1h1标题标签/h1);//设置为文本内容// 4.设置html内容\(span.html(h1h1标题标签/h1);//设置标签体为标签显示\)div.html(h1h1标题标签/h1);//设置标签体为标签显示 /script ​ /body /html
2.jQuery操作属性(掌握) jQuery操作属性 val() 获取或修改表单控件的value值 等于dom.value prop() 获取或修改原生属性值(checkedselected) attr() 获取或修改自定义属性值 等于 dom.setAttribute() dom.getAttribute()
!DOCTYPE html htmlheadmeta charsetUTF-8title获取属性/title /headbodyinput idmyinput typetext nameusername value张三 /br / ulli idbj namebeijing xxxyyy北京/lili idtj nametianjin天津/li/ulinput typecheckbox idhobby checkedchecked//bodyscript typetext/javascript srcjs/jquery-1.8.3.js /scriptscript typetext/javascript//获取张三/** 使用jQuery对象中的val()函数,获取value的值,给value设置* 获取: jQuery对象.val();* 设置: jQuery对象.val(新值);///1.获取id是myinput的标签对象var value \((#myinput).val();//alert(value);//2.改变input输入框的value的值\)(#myinput).val(李四);/** jQuery中的函数attr()获取属性值,设置属性值 获取:jQuery对象.attr(属性名);* 设置:jQuery对象.attr(属性名,属性值 ); ///获取北京节点的name属性值//alert(\((#bj).attr(name));//beijing//设置北京节点的name属性的值为dabeijing//\)(#bj).attr(name,dabeijing);//alert(\((#bj).attr(name));//dabeijing//新增北京节点的discription属性 属性值是didu//alert(\)(#bj).attr(discription));//undefined//\((#bj).attr(discription,didu);//alert(\)(#bj).attr(discription));//didu//删除北京节点的name属性并检验name属性是否存在/** 使用jQuery对象中的函数removeAttr(name)删除指定的属性///\((#bj).removeAttr(name);//alert(\)(#bj).attr(name));//undefined//获得hobby的的选中状态alert(\((#hobby).attr(checked));//选中:checked 未选中:undefined/** jQuery对象中的函数:* prop(属性名); 获取的选中的状态 选中:true,未选中false*/alert(\)(#hobby).prop(checked)); //选中:true,未选中false/script /html 3.jQuery操作样式(掌握) jQuery操作样式 1. css() 获取或者修改CSS样式 用法 css(样式名) 获取一个样式 等于 dom.style.驼峰样式名 css(样式名,样式值) 设置一个样式 dom.style.驼峰样式名样式值 css({样式名:样式值,样式名:样式值}) 批量设置样式 dom.style.cssText 样式名:样式值;样式名:样式值; addClass() 添加一个样式 removeClass() 移除一个样式 toggleClass() 切换一个样式
!DOCTYPE html html langzh headmeta charsetUTF-8title15-jquery操作样式/title!–引入Jquery库文件–script srcjs/jquery-1.8.3.js/script /head body ​ style#p1{ background-color: red;}.mp{color:green}.mpp{background-color: lightgray;} /style p idp11. 设置一个css样式/p p idp2 2. 批量设置css样式/p p idp3 classmpp3. 通过class设置样式/p p idp44. 切换class样式/p input typebutton value切换样式 idbut / scriptlet \(p1 \)(#p1);//获取p1let \(p2 \)(#p2);//获取p2let \(p3 \)(#p3);//获取p3let \(p4 \)(#p4);//获取p4// 1. css() 获取或设置css样式//设置一个样式\(p1.css(color,white);//设置字体白色//批量设置样式\)p2.css({color:green,background-color:gold,border:1px solid red});//批量设置//获取一个样式console.log(\(p2.css(background-color));// 2. addClass() 添加一个class样式\)p4.addClass(mp);//添加一个样式\(p4.addClass(mpp);//添加一个样式// 3. removeClass() 移除一个class\)p4.removeClass(mpp);// 4. toggleClass() 切换一个class\((#but).click(function(){\)p4.toggleClass(mpp);}); /script /body /html 4.jQuery创建和插入对象 语法
API方法解释append(element)添加成最后一个子元素两者之间是父子关系prepend(element)添加成第一个子元素两者之间是父子关系\((A id11aaaa/A)创建A元素对象,同时可以给对象添加属性和标签体before(element)添加到当前元素的前面两者之间是兄弟关系after(element)添加到当前元素的后面两者之间是兄弟关系 代码演示 !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN htmlheadtitle内部插入脚本/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script src../js/jquery-3.3.1.js/script/headbodyul idcityli idbj namebeijing北京/lili idtj nametianjin天津/lili idcq namechongqing重庆/li/ulul idloveli idfk namefankong反恐/lili idxj namexingji星际/li/uldiv idfoo1Hello1/div /bodyscript typetext/javascript/**将反恐放置到city的后面*/\)(#city).append(\((#fk));/**将反恐放置到city的最前面*/\)(#city).prepend(\((#fk));//将反恐插入到天津后面\)(#tj).after(\((#fk));//将反恐插入到天津前面\)(#tj).before(\((#fk));//将反恐插入到天津后面\)(#fk).insertAfter(\((#tj));//将反恐插入到天津前面\)(#fk).insertBefore(\((#tj));/script /html 5.jQuery删除对象 语法 API方法解释remove()删除指定元素empty()清空指定元素的所有子元素 代码演示 !DOCTYPE HTML htmlheadtitle删除节点/titlemeta http-equivcontent-type contenttext/html; charsetUTF-8script typetext/javascript src../js/jquery-3.3.1.min.js/script/headbodyul idcityli idbj namebeijing北京/lili idtj nametianjin天津/lili idcq namechongqing重庆/li/ulp classhelloHello/p how are pyou?/p/bodyscript typetext/javascript//删除li idbj namebeijing北京/li\)(#bj).remove();//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点).\((#city).empty();/script /html jQuery综合案例 1 、案例-表格隔行换色 效果 代码演示 !DOCTYPE html htmlheadmeta charsetUTF-8title/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript typetext/javascript\)(function() {\((tr:gt(1):even).css(background-color, pink);\)(tr:gt(1):odd).css(background-color, yellow);});/script/headbodytable idtab1 border1 width800 aligncentertrtd colspan5input typebutton value删除/td/trtr stylebackground-color: #999999;thinput typecheckbox/thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href修改/a|a href删除/a/td/tr/table/body /html 2、案例-复选框全选全不选 效果 代码演示
!DOCTYPE html htmlheadmeta charsetUTF-8title/titlescript typetext/javascript src../js/jquery-3.3.1.min.js/scriptscript typetext/javascript//创建一个checkbox全选框的单击事件的响应函数function selectAll(obj){//通过class属性值获取所有的其他复选框,设置checked属性值和全选一样$(.itemSelect).prop(checked,obj.checked);}/script/headbodytable idtab1 border1 width800 aligncentertrtd colspan5input typebutton value删除/td/trtrthinput typecheckbox onclickselectAll(this)/thth分类ID/thth分类名称/thth分类描述/thth操作/th/trtrtdinput typecheckbox classitemSelect/tdtd1/tdtd手机数码/tdtd手机数码类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd2/tdtd电脑办公/tdtd电脑办公类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd3/tdtd鞋靴箱包/tdtd鞋靴箱包类商品/tdtda href修改/a|a href删除/a/td/trtrtdinput typecheckbox classitemSelect/tdtd4/tdtd家居饰品/tdtd家居饰品类商品/tdtda href修改/a|a href删除/a/td/tr/table/body /html