JavaWeb-jQuery和xml

---

前期使用准备

$核心函数

<script type="text/javascript">
  $(function (){  //表示页面加载完成之后，相当于onload事件  $就是一个函数
           var $btn =  $("#btn");   //表示按id查询标签对象
           $btn.click(function (){
               alert("jQuery的单击事件")
           });

           $("<div> 对象</div>").append("body");

           var $btns = $("#btn1");  //id

           alert($("button").length);  //标签名

           $(".qq");  //class

       });
       </script>

传入参数为HTML字符串时，根据这个字符串创建元素节点对象
传入参数为 选择器字符串时，根据这个字符串查找元素节点对象
$("#id属性值");
$(“标签名”);
$(".class属性值");
传入参数为DOM对象时。将DOM对象包装为jQuery对象

dom对象和jQuery对象的区别

 alert("nima");
document.getElementById("123").innerHTML = "这个是dom对象";
// $("#123").innerHTML = "这是ce";       //jQuery用不了dom对象的方法

//jQuery和Dom对象的转化：
            //1.dom->jQuery：
            var a = $(document.getElementById("123"));
            alert(a);

            //2.jQuery->dom：
            alert(a[0]);  //通过下标转过去dom对象

选择器

基本选择器

 <script type="text/javascript">

        $(function (){
          //查找id为one的元素
          $("#btn1").click(function (){
            //css方法可以设置和获取样式
            $("#one").css("background-color","#bbffaa");  //id
          })
          $("#btn2").click(function (){
            //css方法可以设置和获取样式
            $(".min").css("background-color","#dcddff");  //class
          })
          $("#btn3").click(function (){
            //css方法可以设置和获取样式
            $("div").css("background-color","red");       //标签名
          })
          $("#btn4").click(function (){
            //css方法可以设置和获取样式
            $("*").css("background-color","blue");       //*全部
          })
          $("#btn5").click(function (){
            //css方法可以设置和获取样式
            $("div,#two").css("background-color","blue");       //组合选择器,div和id为two的
          })
        })
  </script>

层级选择器

<script type="text/javascript">

        $(function (){
          //查找id为one的元素
          $("#btn1").click(function (){

            $("body div").css("background-color","#bbffaa");  //选择body中的所有div标签
          })
          $("#btn2").click(function (){
            //css方法可以设置和获取样式
            $("body > div").css("background-color","#dcddff");  //选择body中的子元素，孙子元素不选择
          })
          $("#btn3").click(function (){
            //css方法可以设置和获取样式
            $("#one+div").css("background-color","red");       //id为one的下一个div元素,选择同级的元素
          })
          $("#btn4").click(function (){
            //css方法可以设置和获取样式
            $("#two~div").css("background-color","blue");       //id为two后面的所有同级的div元素
          })

        })
  </script>

过滤选择器

<script type="text/javascript">
        $(function (){

            //基本过滤器
          var a =$("button:first")   //查找第一个button元素
          var b = $("button:last")    //查找最后一个button元素

          alert($("button:not(.min)").length)    //查找class不是min的button元素

            $("button:odd")  //查找索引为奇数的
            $("button:even")  //查找索引为偶数的

            $("button:eq(1)")  //查找索引为1的，从0开始
            $("button:gt(1)")  //查找索引大于1的
            $("button:lt(1)")  //查找索引小于1的

            $(":header")  //标题

            $(":animated")   //正在执行动画的所有元素




        });
  </script>

属性过滤器和内容过滤器

<script type="text/javascript">
    $(function (){
      //内容过滤器： :内容情况
      $("div:contains('John')");  //查找含有john的div元素

      $("#btn1").click(function (){
        $("td:parent").css("background-color","#bbffaa"); //查找含有内容的td元素
      })
      $("td:empty")   //查找没有内容的td元素

      $("div:has(p)")   //含有p的div元素


      //属性过滤器： [属性]
      $("div[id]") //含有id属性的div
      $("div[id=123]") //含有id属性为123的div
      $("div[id!=123]") //含有id属性不为123的div

      $("input[name$='letter']")  //查找name属性以letter结尾的input元素
      $("input[name^='letter']")  //查找name属性以letter开头的input元素
      $("input[name*='letter']")  //查找name属性以letter开头的input元素

      $("input[id][name*='letter']")  //查找有id属性，name属性以letter开头的input元素



      //表单过滤器   :type类型
      $(":text:enabled").val("输入写入的字符串")   //选择表单内的可输入的test类型的元素
      $(":password")   //选择表单内的password类型的元素
      $(":submit")   //选择表单内的submit类型的元素

      $(":checkbox:checked");                   //选择表单中选中的复选框元素

      //获取全部选中的复选款标签对象
      $("#btn5").click(function (){
        var a = $(":checkbox:checked");         //取出复选框选中的内容
          for( var i = 0; i < a.length;i++)
            alert(a[i].value);
      })

      $("#btn6").click(function (){
        var a = $("select option:selected");         //选中的option对象,获取下拉列表选中的内容
          a.each(function (){
            alert(this.innerHTML);
          });

      })
    })
  </script>

元素的筛选

<!--
        eq() 获取索引的元素
        first（）获取第一个元素
        last() 获取最后一个元素
        filter(exp) 留下匹配的元素
        is(exp) 判断是否匹配给的选择器，有一个匹配就返回true
        has(exp) 返回含有匹配元素的元素
        not(exp) 删除含有匹配元素的元素
        children（exp） 返回子元素
        find(exp)  后代元素
        next（） 下一个兄弟元素
        next All（） 后面的所有兄弟元素
        nextUtil（） 当前到指定之前内的元素
        parents（）  返回父元素

属性操作

 <script type="text/javascript">
          $(function (){

            //不传参数是获取，传参数是设置
            $("div").html();  //获取
            $("div").html("<h1>我是div中的标题1</h1>");  //设置，会转成html格式

            //不传参数是获取，传参数是设置
            $("div").text();  //获取
            $("div").text("<h1>我是div中的标题1</h1>");  //设置，都是文本格式

            //val 设置和获取表单项的value属性值


            //attr 不推荐操作 checked readOnly selected disabled
            alert($(":checkbox:first").attr("name"));  //获取checkbox的name属性值
            $(":checkbox:first").attr("name","abc");  //设置checkbox的name属性值

            //prop 只推荐操作上面不操作的
            //和attr差不多，checked的状态返回的是true false  而attr的状态返回的是checked或者undefind

          })
    </script>

DMO操作

<script type="text/javascript">

    $(function (){

      //内部插入
      //a.appendTo(b) 插入到b内的成为b的最后一个子元素
      //a.prependTo(b) 插入到b内的成为b的第一个子元素


      //外部插入
            //a.insertAfter(b)    得到ba
            //a.insertBefore(b)   得到ab
      var a = $("#div1");
      $("<h1>标题</h1>").insertBefore(a);  //在a的前面插入

      //替换
      // a.replaceWith(b)  //用b替换a，a不见了
      $(a).replaceWith($("<h1>标题</h1>"));  //把一个a变成h1
      $(a).replaceAll($("<h1>标题</h1>"));  //把所有的标题变成a

      //删除
      //a.remove() 删除a标签
      //a.empty(); 把标签内的东西都清除掉
    })
  </script>

CSS样式操作

 <script type="text/javascript">
      $(function (){
          $("#btn1").click(function (){
              $("#div1").addClass('class03');         //添加css样式
          })
          $("#btn2").click(function (){
              $("#div1").removeClass('class03');         //删除css样式
          })

          //toggleClass 有就删除，没有就添加
          //offset()    获取元素在文档的位置

          //设置位置offset
          $("#btn3").click(function (){
              var a = $("#div1").offset();
              console.log(a);
              $("#div1").offset({
                  top:100,
                  left:50
              })
          })
      })

  </script>

动画

</script>
  <!--
    基本动画：   长宽的缩减
        show()显示
        hide()隐藏
        toggle()切换状态

    淡动画：    对可见度的缩减
        fadeIn() 淡入  慢慢可见
        fadeOut()淡出  慢慢消失

            第一个参数是动画的时长，以毫秒为单位
            第二个参数是动画的回调函数（动画完成后自动调用的函数）
    -->
  <script type="text/javascript">
    $(function (){

      $("#btn1").click(function (){
        $("#div1").show(1000,function (){ //show()显示
          alert("show动画完成");
        });
      })

      $("#btn2").click(function (){   //hide()隐藏
        $("#div1").hide(1000);
      })

       $("#btn3").click(function (){         //toggle()切换状态
        $("#div1").toggle(1000,function (){
          alert("toggle动画完成");});
      })
      var abc = function (){          //反复调用，一直执行动画
        $("#div1").toggle(1000,abc)};
      abc();


    })

  </script>

事件

 <script type="text/javascript">
        
        文档加载
             执行顺序：先执行jQuery，然后再执行原生js的onload，js比较慢是因为需要先读取标签请求的参数后才执行
             执行次数：原生js的页面加载完成之后，只会执行最后一次的赋值函数，jQuery是把全部注册的function函数依次执行
        事件处理
             click()    绑定单击事件，触发单击事件
        事件移除
        事件冒泡
             父子元素同时监听一个事件，当子元素的事件触发时，父元素的事件也触发响应 在子元素内加入return false就可以阻止冒泡
        事件对象
             event


        $(function (){
            //jQuery获取事件对象
            $("#div1").click(function (event){
                alert("我是div");
                console.log(event);

            })
              $("#span1").click(function (){  //冒泡： 不加return false的话，会触发父类的事件
                alert("我是span");
            })



        })
        //原生的获取事件对象
        window.onload = function (){
            document.getElementById("div2").onclick = function (event){
                console.log(event);
            }
        }
  </script>

XML

简介
可扩展的标记性语言
作用
1用来保存数据，而且具有自我描述性
2可以作为项目的配置文件
3还可以作为网络传输数据的格式
语法

    //1xml文件的声明
    <?xml version="1.0" encoding="utf-8" ?>
          版本号         编码字符集

    //2xml标签格式
      1名称可以含字母数字以及其他字符
      2名称不能以数字或则标点开始
      3名称中间不能空格
      4可以写成单标签
h
    //xml是强语法，和html差不多，比较严格，没有html的自动修复功能
    //3xml语法规则
      1只有一个父标签，最大的标签不能有兄弟标签
      2属性值比较加引号
      3特殊字符要加符号 &lt; &gt; &nbsp;
      4文本区域CDATA 告诉xml解析器，我CDATA的内容都只是纯文本，不需要解析，这样就不用每次都转义
            格式：<![CDATA [这里可以把你输出的字符原样显示，不会解析 ]]>

    

xml解析

dom4j解析
1.创建一个lib目录，添加dom4j的jar包，并add to libary 添加架包到项目内
2.创建需要生成的对象和属性值，getset方法，构造器和空构造器
3.关键代码：

 /*
    读取books.xml生成的book类
     */
    @Test
    public void test2() throws Exception {
        //1.读取books.xml
        SAXReader saxReader = new SAXReader();
        Document document = saxReader.read("src/books.xml");

        //2.通过dmo对象获取根元素
        Element rootElement = document.getRootElement();
        System.out.println(rootElement);
        //3.通过根元素获取book标签对象
        //element和elements都是通过标签名查找子元素
        List<Element> books = rootElement.elements("book");
        for(Element book:books){
            //把标签对象转化成标签字符串
            Element name = book.element("name");
            String nameText = name.getText();

            String priceText = book.elementText("price");
            String authorTest = book.elementText("author");

            String snValue = book.attributeValue("sn");

            //把获取的属性值封装新建成一个book对象
            System.out.println(new book(snValue,nameText,Double.parseDouble(priceText),authorTest));

        }
        //4.遍历，处理每个book对象转换为book对象
    }