JQuery

来源：互联网发布：ios软件开发教程编辑：程序博客网时间：2024/05/21 14:07
JQuery

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title>    <script src="../resources/js/jquery-1.12.0.js">    </script>    <script type="text/javascript">        /*            jquery 框架特点            轻量级 （Lightweight）            强大的选择器             出色的DOM操作封装             可靠的事件处理机制             出色的浏览器兼容性            jquery 对象是一个数组            dom 对象 可以转换成 jquery 对象 反之亦然            jquery 对象转dom 对象        jquery 对象[0]  或   .get(0)            dom    对象转 jquery 对象$(dom对象)        */        $(document).ready(            function (){                //id 选择器                     var idSelector = $("#div1");                //idSelector.css("background-color","red");                //class 选择器                var classSelector = $(".cla");                //classSelector.css("background-color","red");                //tagName 选择器                var tagNameSelector =$("h1");                //tagNameSelector.css("background-color","red");                //组合 选择器                     var groupSelector = $("span,h1");                //groupSelector.css("background-color","red");                //属性筛选 选择器                /*                    =   等于                    !=  不等于                    ^=  以什么开头                    $=  以什么结尾                    *=  包含什么                */                var filterSelector  = $("div[class=cla]");                //filterSelector.css("background-color","red");                var filterSelector  = $("div[class!=cla]");                //filterSelector.css("background-color","red");                var filterSelector  = $("div[class^=cl]");                //filterSelector.css("background-color","red");                var filterSelector  = $("div[class$=la]");                //filterSelector.css("background-color","red");                var filterSelector  = $("div[class*=l]");                //filterSelector.css("background-color","red");                //多属性 选择器                var moreAttrSelector = $("div[name=div2][dir=ltr]");                //moreAttrSelector.css("background-color","red");                   //层次选择 器                /*                    空格   父元素包含的所有子元素                     >   父元素包含的直接的子元素                     +   该元素的后一个元素                     ~   跟该元素同辈的指定元素                     .parent() 获取父元素                */                var levelSelecct = $("#div1 h1");                  //levelSelecct.css("background-color","red");                   var levelSelecct = $("#div1>h1");                  //levelSelecct.css("background-color","red");                   var levelSelecct = $("#div1+h1");                  //levelSelecct.css("background-color","red");                var levelSelecct = $("#div1~h1");                 //levelSelecct.css("background-color","red");                   /*                    .val()    获取或设置 value                    .html()   获取或设置 中间内容                    .css()    获取或设置 css 样式                    .attr()   获取或设置 元素属性                    .text()   获取元素文本                */                /*                    .append()  内部追加子元素                    .before()  该元素前面添加元素                    .after()   该元素后面添加元素                    .replaceWith() 替换元素                    .remove()  删除自身元素                */                //$("#div1").append($("h1"))                //$("#div1").before($("span"))                //$("h1").replaceWith("替换")                //$("h1").remove()                //隐藏   ("slow","normal", or "fast")                //$("h1").hide()                //显示   ("slow","normal", or "fast")                //$("h1").show(600)                //滑动  滑上 滑下 交替                //$("h1").slideToggle(600);                //$("h1").slideToggle(600);                //淡入  淡入淡出 交替                //$("h1").fadeToggle(600);                //$("h1").fadeToggle(600);            }        );    </script></head><body>    <div id="div1" >        <span>happyNewYear</span>        <h1>新年好</h1>        <div>            <h1>子元素</h1>        </div>    </div>    <h1>div1后面的h1元素</h1>    <h1>div2前面面的h1元素</h1>    <div id="div2" class="cla" name="div2" dir="ltr">        <span>happyNewYear</span>        <h1>新年快乐</h1>    </div></body></html>
0 0