网站建设 国鸿,宁波市镇海建设交通局网站,哈尔滨seo优化团队,搜狗优化好的网站文章目录一.关于jqurey二.什么是jqurey三.上课实例1.表格 2.鼠标移动效果 3隐藏和显示效果代码如下注意一.关于jqurey
简而言之#xff1a;jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
二.什么是jqurey
jQuery 是一个 JavaScript 函数库。
jQu…
文章目录一.关于jqurey二.什么是jqurey三.上课实例1.表格 2.鼠标移动效果 3隐藏和显示效果代码如下注意一.关于jqurey
简而言之jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
二.什么是jqurey
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的写的少做的多的 JavaScript 库。
jQuery 库包含以下功能
HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示 除此之外jQuery 还提供了大量的插件。
三.上课实例
1.表格 2.鼠标移动效果 3隐藏和显示效果
代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript typetext/javascript srcjquery-3.6.3.min.js/scriptscript typetext/javascript srcindex.js defer/script/headbodybutton typebutton idbtn隐藏/buttontable idtabtrth姓名/thth年龄/thth爱好/th/trtrtdxxx/tdtd19/tdtd唱歌/td/trtrtdxxx/tdtd20/tdtd游戏/td/trtrtdxxx/tdtd3/tdtd小汽车/td/trtrtdxxx/tdtd31/tdtd唱歌/td/tr/table/body
/html$(#tab).css({width:600px,margin:0 auto,text-align:center,line-height:30px})$(tr:odd).css({background:red,color:blue
})
.mouseleave(function(){$(this).css({background:red,color:blue})
});$(tr:even).css({background:#333,color:#ddd
})
.mouseleave(function(){$(this).css({background:#333,color:#ddd})});//鼠标移动上去改变背景颜色
//链式写法
$(tr).mouseenter(function(){$(this).css({background:red})
});$(#btn).click(function(){$(#tab).toggle();/* if($(this).text隐藏){$(this).text(显示);$(#tab).fadeOut(2000);}else{$(this).text(隐藏);$(#tab).fadeIn(2000);} */});注意
JQUREY的语法和CSS有些不同它是以$().() 美元符号定义 jQuery 选择符selector“查询和查找” HTML 元素 jQuery 的 action() 执行对元素的操作 实例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有 p 元素
$(“p.test”).hide() - 隐藏所有 class“test” 的 p 元素
$(“#test”).hide() - 隐藏 id“test” 的元素
