zoukankan      html  css  js  c++  java
  • jQuery基础

    1.jquery文件的引入,所有的js代码要写在下面那段代码下面。

    <script src="../jquery-1.11.2.min.js"></script><!--引入的jquery一定是在最上面的,也要在其它引入的jquery文件上面-->

    2.写jquery代码的位置

      和js一样,jquery代码也是写在<script>开始和结束标签之间。

    <script type="text/javascript">


    </script>

    jquery选取元素

    1.根据id找元素

    先在<body>里面写一个<div>

    <div id="a1"></div>

    (1)用js找,取到的是具体的元素。

    var a = document.getElementById("a1");
    alert(a);

    (2)用jquery找,取到的是jquery对象。

    var b = $("#a1");//用jquery找元素的写法,#也是代表根据id找。
    alert(b);
    alert(b[0]);//从对象里面取元素

    2.根据class找元素

    先先在<body>里面写2个<div>

    <div class="aa"></div>
    <div class="aa"></div>

    (1)用js找

    var a = document.getElementsByClassName("aa");
    alert(a);

    (2)用jquery找

    var b = $(".aa")
    //alert(b);
    //alert(b[0]);//取到第一个div
    //alert(b[1]);//取到第二个div
    alert(b.eq(0));//取jquery对象用eq(),取元素本身用[]。

    3.根据标签名取元素

    (1)用js找

    var a = document.getElementsByTagName("div");

    (2)用jquery找

    var b = $("div");
    alert(b);

    4.根据name取

    先先在<body>里面写1个<div>

    <div name="cc"></div>

    (1)用js找

    var a = document.getElementsByName("cc");

    (2)用jquery找

    var b = $("[name=cc]");//根据属性筛选,只要是属性的,都可以找到。
    //alert(b);
    alert(b[0]);

    jquery操作元素

    1.操作内容

    (1)非表单元素

    <div id="a1">11</div>
    var a = document.getElementById("a1");
    //a.innerText = "hello";
    a.innerHTML = "<span style='color:red'>world</span>";

    (2)表单元素

    <input type="text" id="p1" />
    var a = document.getElementById("p1");
    a.value="hello";

    2.操作元素

    (1)非表单元素

      赋值:

    <div id="a1">11</div>
    var b = $("#a1");
    b.text("aaa")
    //b.html("aaa")

      取值:

    var b = $("#a1");
    alert(b.text());
    //alert(b.html());

    (2)表单元素

      赋值

    var b = $("#a1");
    b.val("aaa")

      取值

    var b = $("#a1");
    b.val();

    3.操作属性

      js操作属性

    a.setAttribute("","");
    a.setAttribute("");
    a.removeAttribute("");

      jquery操作属性

    复制代码
    var b = $("#a1");
    
    b.attr("bs","1");//添加

     b.attr("bs");//获取bs属性的值

     b.removeAttr("bs");//移除bs属性

    复制代码

    4.操作样式

    (1)js操作样式

      js不能获取内嵌的属性,只能获取内联的。

    a.style.color = red;

    (2)jquery操作样式

      jquery可以获取、设置内嵌的、外部的、内联的样式。

    alert(b.css("width"));//获取样式
    b.css("font-size","50px");//设置样式

      隐藏3个div的做法

    <style type="text/css">
    .aa{ 100px; height:100px; background-color:#0F0}<!--用内嵌的方式写属性-->
    </style>
    <div class="aa"></div>
    <div class="aa"></div>
    <div class="aa"></div>

      (1)js的写法

    var a = document.getElementsByClassName("aa");
    for(var i=0;i<a.length;i++)
    {
        a[i].style.display = "none";
    }

      (2)jquery的写法

    $(".aa").css("display","none");

    jquery事件、挂事件、移除事件

    复制代码
    <div id="a1">11</div>
    <div class="aa" bs="1">aaa</div>
    <div class="aa" bs="2">bbb</div>
    <div class="aa" bs="3">ccc</div>
    
    <input type="text" id="p1" />
    <input type="button" id="b1" value="挂事件" />
    <input type="button" id="b2" value="移除事件" />
    复制代码
    复制代码
    //jquery加事件
    
    $(document).ready(function(e) {//页面加载完成之后执行事件
    
            //给a1加点击
            /*$("#a1").click(function(){        
                alert('aa');    
            })
            
            //给class为aa的所有元素加事件
            $(".aa").click(function(){
                //alert('bb');
                //alert($(this).text());//取文本值。this点击哪一个就选取哪一个
                //alert($(this).attr("bs"));//取属性值
                
                $(".aa").css("background-color","#0F0");//先让所有的颜色变为原来的颜色
                $(this).css("background-color","red");//点击哪一个背景颜色换成红色
            })*/
            
            //第二种方式挂事件
            $("#b1").click(function(){//匿名函数
            
            $("#a1").bind("click",function(){//bind表示挂事件
            
                alert("我是挂上的事件");
            
                })
                
            $("#b2").click(function(){
                
                $("#a1").unbind("click");//unbind移除事件
            
                })
            
            
            })
            
        
    });
  • 相关阅读:
    Using PL/SQL APIs as Web Services
    1.Cocos2dx 3.2中vector,ValueMap,Touch触摸时间的使用.iconv字符编解码
    我对贝叶斯分类器的理解
    VB.NET的前世今生
    《转》PyQt4 精彩实例分析* 实例2 标准对话框的使用
    网络流合集:bzoj1433,1934,1854 题解
    Android 下拉刷新上拉载入 多种应用场景 超级大放送(上)
    Nginx 笔记与总结(15)nginx 实现反向代理 ( nginx + apache 动静分离)
    深入浅出之数据分析四步曲
    深入浅出之数据分析四步曲
  • 原文地址:https://www.cnblogs.com/ysdong/p/6058105.html
Copyright © 2011-2022 走看看