零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）13jQuery效果.pptVIP

* * * * * 8.5 jQuery效果 8.5.1标签操作 获取元素内容 格式: $(选择器).html( ); 标签内容操作 设置元素内容 格式: $(选择器).html(值); 8.5.1标签操作 示例：单击button按钮事件，修改div元素内容。 style type=text/css #box{width: 100px;height: 100px;border: 1px solid black; margin: 20px auto;text-align: center;} button{width: 100px;height: 30px;margin:0 auto;display: block;} /style script src=js/jquery.min.js type=text/javascript charset=utf-8/script script type=text/javascript $(function(){ //1.获取元素内容,返回内容包含标签 $(button).click(function(){ var xs = $(#box).html(); console.log(xs); //2.设置元素内容，重写元素内容。 xs = i贵州欢迎您/i; $(#box).html(xs); }) }) /script /head body div id=box pWeb前端开发/p /div button点击/button /body 运行效果 部分代码 8.5.1标签操作 获取元素属性 格式: $(选择器).attr(“属性名”) 标签属性操作 设置元素属性 格式: $(选择器).attr(“属性名”,值) 8.5.1标签操作 示例：单击button事件，获取p元素，重新设置它的class属性值为xs1。 style type=text/css #box{width: 150px;height: 100px;border: 1px solid black; margin: 30px auto;text-align: center;} button{ width: 100px;height: 50px;margin:0 auto;display: block;} .xs{font-size: 18px;} .xs1{background: red;} /style script src=js/jquery.min.js type=text/javascript charset=utf-8/script script type=text/javascript $(function(){ $(button).click(function(){ //设置元素class属性 $(#box p).attr(class,xs1); }); }) /script /head body div id=box p class=xsWeb前端开发/p /div button点击/button /body 运行效果 部分代码 8.5.1标签操作 设置元素样式 格式:$(选择器).css(样式属性名，值) 标签样式操作 增加类名 格式: $(选择器).addClass(类名) 删除类名 格式: $(选择器).removeClass(类名) 8.5.1标签操作 示例：点击按钮事件，给#xs1元素删除类名active，并给#xs2元素添加类名active。 style type=text/css .active{color:red;} /style script src=js/jquery.min.js type=text/javascript charset=utf-8/script script type=text/javascript $(function(){ //1.给元素删除类名 $(button).click(function(){ $(#xs1).removeClass(active); //2.给元素增加类名 $(#xs2).addClass(active); }); }) /script /head body p id=xs1 clas