jQuery选择器与事件处理-优快云博客

本文链接：https://blog.youkuaiyun.com/calangan/article/details/75681132

选择器的分类

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>