jQuery

来源：互联网发布：caffe 安装cudnn 编辑：程序博客网时间：2024/06/14 21:09

选择器的分类

id选择器（#）
类选择器（.）
标签选择器
派生选择器
属性选择器
过滤选择器

onclick点击事件

<!DOCTYPE html><html>    <head>        <title>jquery</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>        <script type="text/javaScript" src="./jquery-1.8.3.min.js"></script>        <script type="text/javaScript">            function test1(){                $("#lq").hide();            }            function test2(){                $("#lq").show();            }        </script>    </head>    <body>        <input  type="button" value="隐藏" onclick="test1()"/>        <input  type="button" value="显示" onclick="test2()"/>        <div id="lq">lanqiao<br/>lanqiao<br/>lanqiao<br/>lanqiao</div></html>

document.getElementById.style.display="none";$("#lq").hide();   jQuery("#lq").hide();

三条语句表示的含义是一样的

<input  type="button" value="隐藏" onclick="alert(1)"/><input  type="button" value="隐藏" onclick="$(this).hide()"/>this指代的input标签自己

$.each()

<!DOCTYPE html><html>    <head>        <title>jquery</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>        <script type="text/javaScript" src="./jquery-1.8.3.min.js"></script>        <script type="text/javaScript">            /*function test(){                var elements = document.getElementsByName("hobby");                for(var i=0;i<elements.length;i++){                    var element = elements[i];                    console.log(element.value+element.checked)                }            }*/            var fun = function(i,inputElement){                    console.log(inputElement.value+inputElement.checked);                };            function test(){                (1)$.each($("[name='hobby']"),fun)；                        可以是数组或者jQuery对象调用                (2)$("[name='hobby']").each(fun);                           只能是jQuery对象调用            }        </script>    </head>    <body>        <form>            <label for="hobby1">篮球</label>            <input id="hobby1" type="checkbox" name="hobby" value="1"/>            <label for="hobby2">足球</label>            <input id="hobby2" type="checkbox" name="hobby" value="2"/>            <label for="hobby3">排球</label>            <input id="hobby3" type="checkbox" name="hobby" value="3"/>            <input type="button" value="获取值" **onclick="test()"**/>        </form>    </body></html>

<form>    <label for="hobby1">篮球</label>    <input id="hobby1" type="checkbox" name="hobby" value="1"/>    <label for="hobby2">足球</label>    <input id="hobby2" type="checkbox" name="hobby" value="2"/>    <label for="hobby3">排球</label>    <input id="hobby3" type="checkbox" name="hobby" value="3"/>    <input type="button" value="获取值"/></form>**<script type="text/javascript">    $("[type='button']").click(function(){        alert(11)    });</script>**

过滤选择器

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><style>    .odd{        background-color:pink;    }    .even{        background-color:yellow;    }    .mouse{        background-color:white;    }</style><script type="text/javascript" src="./jquery-1.8.3.min.js"></script><script type="text/javascript">    function changeColor(obj){        $(obj).addClass("mouse")       }</script><table border="1" width="100%">            <tr onmouseover="changeColor(this)">                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>            </tr>            <tr onmouseover ="changeColor(this)">                <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>            </tr></table><script type="text/javascript">            $("tr:odd").addClass("odd");            $("tr:even").addClass("even");</script>

或者可以不在tr使用onmouseover，直接在使用

<script type="text/javascript">            $("tr:odd").addClass("odd");            $("tr:even").addClass("even");            $("tr").hover(function(){                $(this).addClass("mouse");;            },function(){                $(this).removeClass("mouse");            });</script>

onload加载的几种方式

$(document).ready(test);$(test);$(    function(){});onload=test;<body onload=”test2()” ><body>

颜色切换的样式可以在

<script type="text/javascript">            $("tr:odd").css("backgroundColor","pink");            $("tr:even").css("backgroundColor","yellow");            $("tr").hover(function(){                $(this).css("backgroundColor","white");            },function(){                $("tr:odd").css("backgroundColor","pink");                $("tr:even").css("backgroundColor","yellow");            });</script>

注意：addClass()与.css()不要交叉使用

使用bind方法

<script type="text/javascript">            $("tr:odd").css("backgroundColor","pink");            $("tr:even").css("backgroundColor","yellow");            $("tr").bind({                mouseover:function(){$(this).css("background-color","white");},                mouseout:function(){$("tr:odd").css("backgroundColor","pink");                    $("tr:even").css("backgroundColor","yellow");}            });</script>

The beautiful views out of the window for mediterranean.

阅读全文

0 0