zoukankan html css js c++ java

JQuery（一）页面加载，写入文本，对象转换，隐藏显示，基本选择器，层级选择器，基本过滤选择器，表单选择器，class操作，属性操作

JQuery优点：

1)轻巧方便
2)强大的选择器
3)出色的DOM操作的封装
4)可靠的事件处理机制
5)出色浏览器兼容性
6)不污染顶级变量
7)完善的AJAX
8)开源

jQuery的引入方式
jQuery它是一个库(框架)，要想使用它，必须先引入！
jQuery-1.8.3.js：一般用于学习阶段。
实际项目中根据具体情况而定，一般使用压缩版（.min.js）
引入语法：<script type=”text/javascript” src=”js/jquery-1.8.3.js”></script>

window.onload和jquery的ready函数的主要区别：
1.onload事件只能执行一个函数。如果多次绑定onload事件，则后面绑定的会覆盖之前的。因此只能执行一个函数；而ready函数可以调用多次，执行多个函数。
2.onload是当页面所有内容都加载完毕时才调用。如果页面中存在大的图片或者视频，则也必须等到加载完毕才能执行调用的函数；而ready是当页面主要元素加在完毕后执行，大的图片和视频等元素则未必加载完毕，这样用户体验度会更好一些，不用等待过长时间。

例子：jQuery的页面加载

<script type="text/javascript">   
　　//原来的JavaScript的写法，页面加载函数
    //一个页面只加载一次，之后的会覆盖掉之前页面加载函数
    window.onload=function(){
        //提示信息
        alert("windowhello");
    }
    window.onload=function(){
        //提示信息
        alert("windowhello1");
    }
  //现在用JQ的写法，页面加载函数，$表示JQuery($和JQuery两个都可以用)
    //标准写法
    $(document).ready(function(){
        alert("hello");
    })
    jQuery(document).ready(function(){
        alert("hellojq");
    })
    $(document).ready(function(){
        alert("hello1");
    })
//简易写法
    //JQ不会覆盖，是按照顺序一个个加载
    $(function(){
        alert("hello");
    })    
</script>

JQ的获取：

    //JS写法
　　window.onload=function(){
        var btn1=document.getElementById("btn1");
        alert(btn1.value)
    }
    //JQ写法
    $(function(){
        var btn2=$("#btn2");
        alert(btn2.val());
        var btn2=$("#btn2").val();
        alert(btn2);
    })

在文本框中写入文本两种方法：

html写入文本输入：会按照html读取解析文本

text写入文本输入:会直接写入文本

    //添加点击事件
    //JS
    window.onload=function(){
        var btn1=document.getElementById("btn1");
        btn1.onclick=function(){
            //输入innerhtml
            //获取span
            document.getElementById("span1").innerHTML="hello"
        }
    }
    JQ
    $(function(){
        $("#btn1").click(function(){
            //获取span
            //html写入文本输入：会按照html读取解析文本
            $("#span1").html("<a href='hello.html'>hellojq</a>");
            //text写入文本输入:会直接写入文本
            $("#span1").text("<a href='hello.html'>hellojq</a>");
        })
    })

jQuery对象与DOM对象转换
jQuery对象和DOM对象是相互独立的，可以相互转换，但是两个对象的函数不能混淆使用（这点一定要谨记）。
将DOM对象转换为jQuery对象，语法：jQuery(dom对象)或者$(dom对象)
将jQuery对象转换为DOM对象，语法：$jquery对象名[index]或者$jquery对象名.get(index)。

//JS写法
    window.onload=function(){
        //添加点击事件
        document.getElementById("btn1").onclick=function(){
            //获取span对象----DOM对象
            var dom=document.getElementById("span1");
            //把DOM对象转换为jQuery对象  格式：jQuery(dom对象)或者$(dom对象)
            $(dom).html("<a href='#'>hello JavaScript</a>");
            //DOM对象能否使用jQuery函数吗？比如jQuery.html()
            dom.html("<a href='#'>hello JavaScript</a>");
            //得出结论：DOM对象不能直接使用jQuery函数和属性
        }
    }
            
    //JQ写法
    $(function(){
        //添加点击事件
        $("#btn2").click(function(){
            //获取到span对象----jQuery对象
            //方式一：$对象名[index]----DOM对象
                    $("#span1")[0].innerHTML="hellojq1"
            //方式二：$对象名.get(index)
                    $("#span1").get(0).innerHTML="hellojq2"
            //jQuery对象能否直接操作JavaScript的方法和属性吗？比如innerHTML
            $("#span1").innerHTML="hello jQuery";
            //得出结论：jQuery对象不能直接操作JavaScript的方法和属性
        })
    })

jQuery效果
1.基本显示和隐藏效果
　　show(speed,fn):显示某元素
　　　　参数speed:显示速度，单位毫秒。也可使用固定字符串：slow,normal,fast
　　　　参数fn:显示成功之后的回调函数
　　hide(speed,fn):隐藏某元素
　　　　参数同上
　　toggle(speed,fn):切换显示和隐藏效果，即如果元素隐藏，则使用该方法后则显示，反之则隐藏。
2.滑动效果
　　slideDown():元素显示，高度逐渐变高，直到设置值。
　　slideUp():元素隐藏，高度逐渐变小，直到高度为0,元素隐藏。
　　slideToggle():切换隐藏和显示效果
3.淡入淡出效果
　　fadeIn():元素显示。从透明一直到完全不透明。
　　fadeout():元素隐藏。从完全不透明到完全透明再隐藏。
　　fadeToggle():切换显示隐藏效果
　　fadeTo(speed,opacity,[fn]):指定透明度
　　　　第二个参数opacity取值0-1之间数值;

例子：轮辐广告，图片显示和隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <!--引入jq框架-->
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            var timer;
            //页面加载函数
            $(function(){
                //图片轮播的定时器
                setInterval("changeImg()",3000);
                setInterval("showImg()",3000);
            })
            //图片轮播具体的实现方法
            var num=1;
            function changeImg(){
                if(num>3){
                    num=1;
                }
                //获取图片的标签
                document.getElementById("imgId").src="img/"+num+".jpg";
                num++;
            }
            
            
            //弹出图片的方法
            function showImg(){
                //获取图片的标签  显示用show(),括号中填写的是显示的时间长度
//                $("#showImg").show(5000);//注意单位是毫秒
                //滑动显示
//                $("#showImg").slideDown(5000);
                //淡入显示：fadeIn()
                $("#showImg").fadeIn(2000);
                //清除显示广告的定时器
                clearInterval(timer);
                //隐藏图片的定时器
                timer = setInterval("hiddenImg()",2000);
            }
            
            function hiddenImg(){
                //获取到图片的标签
                //$("#showImg").hide(5000);//注意单位是毫秒
                //滑动隐藏：slideUP()
                $("#showImg").slideUp(2000);
                //淡出隐藏：fadeOut()
                //$("#showImg").fadeOut(5000);
                //清除隐藏广告的定时器
                clearInterval(timer);
            }
            
        </script>
        <title></title>
    </head>
    <body>
        <!--弹出广告图片-->
        <div>
            <!--行内先设置图片隐藏-->
            <img id="showImg" src="img/sh.jpg" width="100%" style="display: none;"/>
        </div>
        <!--图片轮播-->
        <div>
            <img id="imgId" src="img/1.jpg" width="100%" />
        </div>
        <div>
            <a href="#">首页</a>
            <a href="#">手机数码</a>
            <a href="#">零食</a>
        </div>
    </body>
</html>

隐藏和显示互换toggle：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //给按钮添加点击时间
                $("#btn1").click(function(){
                    //获取图片标签
                    //
//                    $("#showImg").toggle(2000);
                    //
                    $("#showImg").slideToggle(2000);
                    //
//                    $("#showImg").fadeToggle(2000);
                })
            })
        </script>
        <title></title>
    </head>
    <body>
        <input type="button" name="" id="btn1" value="点一下显示/点一下隐藏" />
        <br>
        <img id="showImg" src="img/1.jpg" width="100%" />
    </body>
</html>

jQuery基本选择器：
id选择器：$(“#id名称”);
元素选择器：$(“元素名称”);
类选择器：$(“.类名”);
通配符：*
多个选择器共用(并集)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
            <script type="text/javascript">
                $(function(){
                    //获取按钮的点击事件
                    $("#btn1").click(function(){
                        //id选择器：&("#id的名称")
                        $("#one").css("background-color","red")
                    })
                    $("#btn1").click(function(){
                        //类选择器：$(".类名")
                        $(".min").css("background-color","blue");
                    })
                    $("#btn3").click(function(){
                        //元素选择器：$("元素名称")
                        $("div").css("background-color","yellow");
                    })
                    $("#btn4").click(function(){
                        //元素选择器：$("*")通配符：整个页面
                        $("*").css("background-color","pink");
                    })
                    $("#btn5").click(function(){
                        //元素选择器：$("元素名称，元素名称")：求并集
                        $("#two,.min222").css("background-color","orange");
                    })
                })
            </script>
        <title></title>
    </head>
    <body>
        <input id="btn1" type="button" value="选择为one的元素"/>
        <input id="btn2" type="button" value="选择样式为min的元素"/>
        <input id="btn3" type="button" value="选择所有div的元素"/>
        <input id="btn4" type="button" value="选择所有元素"/>
        <input id="btn5" type="button" value="选择id为two或者样式为min222的元素"/>
        <hr />
        <div id="one">
            <div class="min">1111</div>
        </div>
        <div id="two">
            <div class="min">2222</div>
            <div class="min222">3333</div>
        </div>
        <div id="three">
            <div class="min">4444</div>
            <div class="min">5555</div>
            <div class="min">6666</div>
        </div>
        <span id="four">
            7777
        </span>
    </body>
</html>

层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    //ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
                    $("body div").css("background-color","red");
                })
                
                $("#btn2").click(function(){
                    //parent > child : 在给定的父元素下匹配所有的子元素(儿子)
                    $("body>div").css("background-color","blue");
                })
                
                $("#btn3").click(function(){
                    //prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
                    $("#two+div").css("background-color","yellow");
                })
                
                $("#btn4").click(function(){
                    //prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
                    $("#two~div").css("background-color","pink");
                })
            })
        </script>
        <title></title>
    </head>
    <body>
        <input id="btn1" type="button" value="选择body中所有的后代为div的元素"/>
        <input id="btn2" type="button" value="选择body中儿子级别的div元素"/>
        <input id="btn3" type="button" value="选择id为two的下一个元素"/>
        <input id="btn4" type="button" value="选择id为two的兄弟元素"/>
        <hr />
        <div id="one">
            <div class="min">1111</div>
        </div>
        <div id="two">
            <div class="min">2222</div>
            <div class="min222">3333</div>
        </div>
        <div id="three">
            <div class="min">4444</div>
            <div class="min">5555</div>
            <div class="min">6666</div>
        </div>
        <span id="four">
            7777
            <div class="min">8888</div>
        </span>
        <div id="five">
            <div class="min">9999</div>
        </div>
    </body>
</html>

基本过滤选择器
　　基本：
　　　　:first
　　　　:last
　　　　:not
　　　　:even
　　　　:odd
　　　　:eq
　　　　:gt
　　　　:lt
　　　　:header
　　　　:animated
　　内容：
　　　　:contains
　　　　:empty
　　　　:has
　　　　:parent
　　可见性：
　　　　:hidden
　　　　:visible

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery基本过滤选择器页面</title>
        <!--要想使用jQuery，必须先引入-->
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            //页面加载函数
            $(function(){
                //获取按钮的点击事件
                $("#btn1").click(function(){
                    //:first第一个元素
                    $("body div:first").css("background-color","red");
                })
                $("#btn2").click(function(){
                    //:last最后一个元素
                    $("body div:last").css("background-color","blue");
                })
                $("#btn3").click(function(){
                    //:even偶数元素  索引是从0开始的
                    //父类中的所有的元素同时进行排序，不管是儿子还是孙子
                    $("body div:even").css("background-color","yellow");
                })
                $("#btn4").click(function(){
                    //:odd奇数元素
                    $("body div:odd").css("background-color","pink");
                })
                
            })
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="选择body中第一个div的元素"/>
        <input id="btn2" type="button" value="选择body中最后一个div元素"/>
        <input id="btn3" type="button" value="选择body中偶数div元素"/>
        <input id="btn4" type="button" value="选择body中奇数div元素"/>
        <hr />
        <div id="one">
            <div class="min">1111</div>
        </div>
        <div id="two">
            <div class="min">2222</div>
            <div class="min222">3333</div>
        </div>
        <div id="three">
            <div class="min">4444</div>
            <div class="min">5555</div>
            <div class="min">6666</div>
        </div>
        <span id="four">
            7777
            <div class="min">8888</div>
        </span>
        <div id="five">
            <div class="min">9999</div>
        </div>
    </body>
</html>

表单选择器
　　表单：
　　　　:input
　　　　:text
　　　　:password
　　　　:radio
　　　　:chackbox
　　　　:submit
　　　　:image
　　　　:reset
　　　　:button
　　　　:file
　　　　:hidden
　　表单对象属性：
　　　　:enabled
　　　　:disabled
　　　　:checked
　　　　:selected

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery表单选择器页面</title>
        <!--要想使用jQuery，必须先引入-->
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            //页面加载函数
            $(function(){
                //获取按钮的点击事件
                $("#btn1").click(function(){
                    $(":input").css("background-color","red");
                })
                $("#btn2").click(function(){
                    $(":text").css("background-color","blue");
                })
                $("#btn3").click(function(){
                    var num = $(":radio").size();
                    alert(num);
                })
                $("#btn4").click(function(){
                    var num = $(":checkbox").size();
                    alert(num);
                })
            })    
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="选择所有input元素"/>
        <input id="btn2" type="button" value="选择text文本框元素"/>
        <input id="btn3" type="button" value="选择单选元素"/>
        <input id="btn4" type="button" value="选择多选元素"/>
        <hr />
        <form>
            <input type="text"/><br />
            <input type="password"/><br />
            <input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br />
            <input type="checkbox"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>排球<br />
            <input type="submit"/><br />
            <input type="file"/><br />
            <input type="image"/><br />
            <input type="reset"/><br />
            <input type="button" value="普通按钮"/><br />
            <input type="hidden"/>
        </form>
    </body>
</html>

例子：使用jQuery完成表格隔行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成表格隔行换色</title>
        <!--要想使用jQuery，必须先引入-->
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <style>
            .even{
                background-color: yellow;
            }
            .odd{
                background-color: pink;
            }
        </style>
        <script type="text/javascript">
            //页面加载函数
            $(function(){
                //用JavaScript的写法获取表格行数对象
                //tBodie[0].rows[i]//获取行数
                //$("tbody>tr:even").css("background-color","yellow");
                //$("tbody>tr:odd").css("background-color","pink");
                //addClass():添加写好的样式
                $("tbody>tr:even").addClass("even");
                $("tbody>tr:odd").addClass("odd");;
            })    
        </script>
    </head>
    <body>
        <table border="1" width="600" height="500" cellspacing="0.5" align="center">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>45</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>马六</td>
                    <td>71</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>黄七</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>田九</td>
                    <td>27</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

class操作

　　addClass():给指定元素追加class属性样式
　　removeClass():将指定元素的class属性移除
　　toggleClass():切换class属性样式，即没有该class属性则添加，有该class属性则移除

属性操作：

　　prop()：

　　attr(name)：取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。

　　attr(properties)：将一个“名/值”形式的对象设置为所有匹配元素的属性。

　　　　　　　　　　这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

　　attr(key,value)：为所有匹配的元素设置一个属性值。

　　attr(key,fn)：为所有匹配的元素设置一个计算的属性值。

　　　　　　　　不提供值，而是提供一个函数，由这个函数计算的值作为属性值。

　　removeAttr(name)：从每一个匹配的元素中删除一个属性

　　prop()：操作元素的特性。获取一些第一次分配undefined属性值的标签，如果抛异常，将忽略浏览器生成的任何错误。
　　removeProp()：移除标签的特性。

attr(name)使用方法：

<img src="test.jpg"/>

$("img").attr("src");

结果：test.jpg

attr(properties)的使用方法：

HTML 代码:
<img/>
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:
[ <img src= "test.jpg"  alt:="Test Image" /> ]

attr(key,value)的使用方法：

<img/> 

<img/>

$("img").attr("src","test.jpg");

结果：[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

attr(key,fn)的使用方法：

<img src="test.jpg"/>

$("img").attr("title", function() { return this.src });

结果：<img src="test.jpg" title="test.jpg" />

removeAttr(name)：

<img src="test.jpg"/>

$("img").removeAttr("src");

结果：[ <img /> ]

查看全文

相关阅读:
近来无聊写了一个google音乐的下载器
 HTML编辑器 HtmlArea
Html编辑器 TinyMCE
IE浏览器自定义地址协议通过B/S程序中打开C/S程序
 html 元素的 onpropertychange 事件
 asp.net 服务器控件防止重复提交表单
 用 BindingSource 绑定窗体中控件不失去焦点无法更新数据源的问题
 动态创建大量 html dom 元素时提升性能
 很黄的日期格式化。。。
Asp.net 导出 .html，.txt 等格式的文件

原文地址：https://www.cnblogs.com/gfl-1112/p/12885825.html