jQuery模板文件

Rsun04551

于 2020-04-29 16:37:52 发布

阅读量285

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/yang_guang3/article/details/105843184

版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquery</title>
    </head>
    <body>
        <!--JS库，比JS有趣的多：写得少，做得多-->
        <p>如果你点我，我就会消失。</p>
        <p>继续点我!</p>
        <p>接着点我!</p>
        <p id="p1">上下滚动</p>
        <button>点我上下滚动上面的内容</button>
        <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
        <p>名称: <input type="text" id="test1" value="菜鸟教程"></p>
        <div id="div1"><h2>修改文本内容</h2></div>
        <button id="btn1">获取外部数据</button><br>
        <button id="btn2">get请求外部数据</button><br>
        <button id="btn3">post请求外部数据</button>
    </body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("p").click(function () {
                $(this).hide()
            });
            $("button").click(function () {
                $("#p1").css("color","red").slideUp(2000).slideDown(2000);
            });
            $("#btn1").click(function () {
                $("#div1").load("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5");
            });
            $("#btn2").click(function () {
               $.get("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews&page=1&rows=5",function (data,status) {
                   alert("数据：" + data + "状态：" + status);
               });
            });
            $("#btn3").click(function () {
                $.post("http://www.91cht.com/woxiang/control/bapi?operFlag=getNews",
                {page:"1",rows:"5"},
                function(data,status) {
                    alert("数据：" + data + "状态：" + status);
                });
            })

        })
        /*获取内容：
        text(获取标签内内容)：这是段落中的粗体文本。、
        html(获取标签内内容，包括html代码)：这是段落中的 <b>粗体</b> 文本。、
        val(获取标签value属性的值)：菜鸟教程
        */
        /*获取属性：attr和prop
        * html的固有属性使用prop；
        * html的自定义dom属性使用attr
        * */
        /*
        * 添加元素：
        * append()：元素结尾插入内容
        * prepend()：元素开头插入内容
        * after()：元素之后插入内容
        * before()：元素之前插入内容
        * 删除元素：
        * remove() - 删除被选元素（及其子元素）
        * empty() - 从被选元素中删除子元素
        * 获取并设置 CSS 类：
        * addClass() - 向被选元素添加一个或多个类
        * removeClass() - 从被选元素删除一个或多个类
        * toggleClass() - 对被选元素进行添加/删除类的切换操作
        * css() - 设置或返回样式属性
        * css() 方法：
        * css("propertyname")：返回 CSS 属性
        * css("propertyname","value")：设置 CSS 属性
        * css({"propertyname":"value","propertyname":"value",...})：设置多个 CSS 属性
        * 尺寸方法：
        * width(宽度)、height()、innerWidth(宽度+内边距)、innerHeight()、outerWidth(宽度+内边距+边框)、outerHeight()
        * jQuery遍历：即移动   	祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
        * 父级：parent(元素的直接父元素)、parents(元素的所有祖先元素)、parentsUntil(两个给定元素之间的所有祖先元素)
        * 后代：children(元素的所有直接子元素)、find(元素的后代元素)
        * 同胞：siblings(元素的所有同胞元素)、next(元素的下一个同胞元素)、nextAll(元素的所有跟随的同胞元素)、nextUntil(介于两个给定参数之间的所有跟随的同胞元素)
        * prev(), prevAll() & prevUntil() 方法，与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素。
        * 可以使用可选参数来过滤对同胞元素的搜索。
        * jQuery过滤：
        * first(返回被选元素的首个元素)、last(返回被选元素的最后一个元素)、eq(返回被选元素中带有指定索引号的元素，从0开始)、filter(允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回)
        * not(返回不匹配标准的所有元素)
        * 为了防止 $ 符号再其他JS框架中进行冲突，jQuery提供了noConflict() 方法来防止冲突，可以直接用jQuery全程进行。
        * JSONP：跨域读取数据。
        * */
    </script>
</html>