jQuery基础（一）、jQuery简介、dom对象与jQuery对象、选择器、事件冒泡与阻止默认行为

于 2018-06-11 21:27:48 发布
阅读量173 收藏
点赞数
分类专栏： web前端 文章标签： jq jQuery web前端 h5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lijiuchangxin/article/details/80658183
版权
一：jQuery简介
jQuery是一个优秀的JavaScript库，其理念是“写得少，做的多”
在jQuery中，$就是jQuery的一个简写形式。例如：$("#foo")和jQuery("#foo")是等价的；$.ajax和jQuery.jax是等价的。
二：DOM对象与jQuery对象
DOM对象与jQuery对象：
   1. 通过JavaScript中的getElemsByname、getElementByID等方法获取元素节点，得到的就是DOM对象。
   2. jQuery对象就是通过jQuery包装DOM对象后产生的对象。

DOM对象与jQuery对象的互相转换
一个约定：如果获取的对象是jQuery对象，那么在变量名前加上$，
例如：
var $variable = jQuery对象 。
如果获取的是DOM对象，则不用加$符号：
var variable = DOM对象

1.DOM对象转换成jQuery对象
对于一个DOM对象，只要用$()把DOM对象包装起来，皆可以获得一个jQuery对象了。即：$(DOM对象 )。
2.jQuery对象转换成DOM对象
方式一：由于jQuery对象是一个类似数组的对象，可以他用过[index]的方法得到相应的DOM对象。eg：
        var $a = $("#a");
        var a = $a[0];
方式二：通过jQuery对象本身提供的get方法。eg：
        var $a = $("#a");
        var a = $a.get(0);
三：$(document).ready(function(){})
在jQuery中，通过使用：
  
$(document).ready(function(){
    // dom结构绘制完毕后执行此处代码
})
也可以编写DOM结构绘制完毕后执行的代码该结构也可简写成：
  
$(function(){
    // DOM结构绘制完毕后执行此处代码
})
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个jQuery代码</title>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            alert("hello jQuery")
        })
        $(function(){
            alert("hi jquery")
        })
    </script>
</head>
<body>
    
</body>
</html>
四：jQuery选择器
1.id选择器$(#id名称)
  
$("#myDiv").css("border","1px solid red");
此代码对象JavaScript的：
document.getElementByid("myDiv").style.border="3px solid red";
2.通用选择器$("*")
3.类选择器$(".class")
4.复选框选择器(".checkbox")
5.后代选择器$("ancestor descendant")
6.子选择器$("parent">child)
  
​
7.多元素选择器$(“selector1,selector2,selectorN”)
8. :qr选择索引值为index的元素
9. :even索引值为偶数的元素，从0开始计数
10. odd索引值为奇数的元素，从0开始计数
11. ：password选择所有类型为密码的元素
12. :radio 选择所有类型为单选框的元素
eg：子选择器
  
#子选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子选择器与后代选择器</title>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#first").css({
                "width":"300px",
                "height":"300px",
                "background-color":"yellow"
            })
            $("#second").css({
                "width":"200px",
                "height":"200px",
                "background-color":"green"
            })
            $("#third").css({
                "width":"100px",
                "height":"100px",
                "background-color":"red"
            })
            $("#first div").css({
            "border":"3px solid blue"
            })
​
        });
​
    </script>
</head>
<body>
    <div id="first">
        <div id="second">
            <div id="third">
            </div>
        </div>  
    </div>  
</body>
</html>
eg：改变css样式
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用jQuery改变css样式</title>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("*").css("margin","0").css("border","0px")
            $("#mydiv").css("background-color","#ccffdd").css("height","500px");
            $("#btn").click(function(){
                $("#mydiv").css("background-color","yellow")
​
            })
            $("#btn2").bind("click",function(){
                $("#mydiv").css("background-color","red")
            })
            $(".fruit").css("background-color","#ffee55")
            $(".sport").css("background-color","#aabbcc")
​
        })
    </script>
</head>
<body>
    <div id="mydiv" ></div>
    <input type="button" value="改黄色" id="btn">
    <input type="button" value="变红色" id="btn2">
    <p class="fruit">西瓜是一种很甜的水果</p>
    <p class="sport">长跑运动很锻炼人</p>
    <p class="fruit">苹果也很甜</p>
    <p class="sport">足球很好玩</p>
    <p class="fruit">香蕉更甜</p>
</html>
五：事件冒泡与阻止默认行为
1.当在有包含关系DOM层级上绑定事件时，事件会按照DOM层级结构顺序从内到外依次触发，这就是“事件冒泡”
2.停止事件冒泡的方法
在事件处理函数中加上event事件对象，调用event事件对象的stopPropagation()方法。
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间冒泡</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding:0px;
        }
        #parent{
            width: 300px;
            height: 300px;
            background-color: yellow;
            padding: 100px;
        }
        #child{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        body{
            border: 2px solid blue;
        }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("body").bind("click",function(){
                alert("body被点击了")
            })
​
            // $("#parent").bind("click",function(){
            //  alert("父div被点击了")
            // })
            $("#child").bind("click",function(eventObj){
                alert("子idv被点击了")
                eventObj.stopPropagation() //停止时间冒泡
            })
            $("parent").click(function(eventObj){
                alert("父div被点击了！")
                eventObj.stopPropagation()
            })
        })
​
    </script>
</head>
<body>
    <div id="parent">
        <div id="child"></div>
    </div>
    
</body>
</html>

补充：阻止事件默认行为也是用event事件对象：event.preventDefault();
  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认行为</title>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#myform").submit(function(evt){
                if ($("#uname").val().trim().length==0) {
                    alert("a");
                    evt.preventDefault();
                }
            });
        });
    </script>
</head>
<body>
    <form action="serverURL" method="psot" id="myform">
        用户名：<input type="text" name="username" id="uname"> <br>
        Mima : <input type="password" name="pwd" id="upwd"> <br>
        <input type="submit" value="注册" >
        <input type="reset" value="重置">
​
    </form>
</body>
</html>
    

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值