JQueryDAY01

最新推荐文章于 2024-11-04 23:24:03 发布

小太阳啊~

最新推荐文章于 2024-11-04 23:24:03 发布

阅读量354

点赞数

分类专栏：学习文章标签： javase java 开发语言

本文链接：https://blog.csdn.net/xjj168323/article/details/121644614

版权

学习专栏收录该内容

42 篇文章 0 订阅

订阅专栏

JSday02(JQuery)

JS扩展
- alert（）:只有确定按钮的提示框
- confirm():包含确定和取消两个提示框
- 取消默认 return false;
JQUery
$是jQuery，jQuery函数引用
$()是触发（调用）核心函数
传入参数为函数时：$(fuction(){})类似与window.onload作用相同
- $(fn)与window.οnlοad=fn区别
  - 加载的时机不同，前者当前文档绘制成功后执fn，后者是当前文档完全加载后执行fn（绘制成功：节点加载绘制成功（标签，属性，文本））
  - 总结：$(fn)先执行，winodw.οnlοad=fn后执行
- 在当前文档中，书写次数不同，前者可以书写多次，后者只有一次，因为后者书写多次winodw.onload会覆盖前面
- 语法结构不同，前者两种，后者一种
  - 前者中的$符号可以写出jQuery

传入参数为选择器字符串时：$(选择器字符串)

       //类似window.onload
        $(function (){
            //通过id获取元素，并且关联点击事件
            $("#sss").click(function (){
                alert("起飞");
            });
        });
    </script>
</head>
<body>
 <button id="sss">hello</button>

传入参数为HTML字符串时：$(HTML字符串)，创建HTML元素节点

      $(function (){
             var $h = $("<li>贵州</li>");
            $("#city").append($h);
            })
    </script>
</head>
<body>
 <button id="sss">hello</button>
 <ul id="city">
     <li>上海</li>
     <li>北京</li>
     <li>广东</li>
     <li>重庆</li>
 </ul>

传入参数为DOM对象时：$(DOM对象)，江DOM对象转换成jQurey对象

$(function (){
    //创建一个DOM的对象
    var h = document.getElementById("sss");
    alert(h);
    //创建一个jQuery对象
    var $b = $(sss);
     alert($b);
      //将DOM对象转换成jQuery对象
            var $x = $(h);
            alert($x)
})

DOM对象和JQuery对象之间的相互转换并调用方法

    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

            $(function (){ //这一步相当于wendow.onload
                //用DOM对象调用DOM方法(//每一个按钮都要输出前车之鉴，后车之师)
                $("#ss").click(function (){ //将点击事件关联
                    var ss = document.getElementById("cc");//取出id元素
                    alert(ss.innerText);///nnerText是输出文本
                    //用jQuery对象调用JQuery方法
                    $("#zz").click(function (){
                        var zz = $("#cc").text();
                        alert(zz)
                    })
                    //用DOM对象调用JQuery方法
                    $("#bb").click(function (){
                         var bb = document.getElementById("cc");//DOm对象
                         //进行转换
                        var $s = $(bb);
                        alert($s.text());
                    })
                    //用JQuery对象调用DOM方法
                    $("#ee").click(function (){
                        var ee = $("#cc")
                          var e = ee[0]; //将JQuery看成数组 用这种方式转换
                         //var e = ee.get(0);
                        alert(e.innerText)
                    })
                });
            });

    </script>
</head>
<body>
<div id="cc">前车之鉴，后车之师</div><br>
<button id="ss">用DOM对象调用DOM方法</button>
<button id="zz">用jQuery对象调用JQuery方法</button>
<button id="bb">用DOM对象调用JQuery方法</button>
<button id="ee">用JQuery对象调用DOM方法</button>
</body>
</html>

总结DOM对象与jQuery对象的转换

DOM对象转换为jQuery对象：
- var $obj = $obj[0];
JQuery对象转换为DOM对象（将jQuery对象看成数组或集合）
- var dromObj = $obj.get(0);
- var dromObj = $obj[0]];
jQuery选择器
看文档！

Jquery 操作DOM
JQuery操作标签
- 增
  - 内前
    - append（）
    - appendto()
  - 内后
    - prepend（）
    - prependto()
  - 外后
    - after()
    - insertAfter()
  - 外前
    - befor()
    - insertBefor()
- 删
  - empty() 掏空
  - remove() 删除本身
- 改
  - replaceWith()
  - replaceall()
- 查
  - eq()
  - first()
JQuery操作属性
- attr(""):获取指定属性值
- attr（“”，“”）：为指定属性赋值
- prop（）：同上（升级版）
JQuery操作文本
- text（）：操作文本值
- text（”“）：设置文本值
- html（）
- val() :获取value属性值
- val（”“）：为指定元素设置value属性值
- val([""]):为下拉框，单选框，多选框设置选择状态
JQuery操作样式表
- css(""): 获取指定样式表
- css("",") 为指定元素设置样式表
- addClass（）
- removeClass（）
jQuery常用事件
- $(doucument).ready(fn):当前文档绘制成功后执行
- click（fn）：单击事件
- live（”事件名“，fn）：事件委派（$xxx.live(事件名",fn")）
- delegate("选择器","事件名"，fn)
- change（fn）：文本改变且失去焦点事件
- mouseover：鼠标移入（悬停）事件
- mouseout：鼠标移出事件
正则表达式
正则表达式：一组验证数据规则
语法结构为：var a = /^[规则]{n,m}/；
- /a/:表示要含有a，a的位置不限
- /^a/:表示以a开头的才可以
- /a$/：表示以a结尾的才可以
- /ab/: 表示出现ad才可以（ab不可以分开，顺序不能换）
- /[ab]/:表示出现a或者b其中一个都可以
- /[a-z]/:表示出现a到z字母中的一个都可以
- /[a-zA-Z]/:表示出现a-z中的一个（可以出现大写）都可以
- /[0-9]/：表示出现0-9的数组都可以
- /[_]/：表示出现下划线都可以
- /{2.9}/:表示用户名或者密码长度要在[2.9]之间
- /{6}/:表示用户名或者密码长度只能是6
- /{6，}/:表示用户名或者密码长度>=6
验证
- test（）：返回bolean类型数值【true：数据合法，false：数据不合法】
特殊规则
- 特殊字符
  - \d:等价于[0-9]
  - \w:等价于[a-zA-Z0-9]
  - . ：匹配除\n任何字符
- 特殊次数
  - *等价于{0,}匹配任意次
  - ？等价于{0,1} 匹配0次或1次
  - - 等价于{1,}匹配至少一次