JQuery基础

一 JQuery是轻量级的js库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

二 JQuery对象：是通过jQuery包装DOM对象后产生的对象， jquery的基础语法：$(selector).action() 。

JQuery中文文档说明 http://jquery.cuishifeng.cn/

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

三选择器&筛选器：

　选择器：

　　基本选择器

$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

基本筛选器　　

$("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

属性选择器

$('[id="div1"]')   $('["alex="sb"][id]')

表单选择器

$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

筛选器

　　过滤筛选器

$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")

查找筛选器　

 查找子标签：         $("div").children(".test")      $("div").find(".test")  
                               
 向下查找兄弟标签：    $(".test").next()               $(".test").nextAll()     
                    $(".test").nextUntil() 
                           
 向上查找兄弟标签：    $("div").prev()                  $("div").prevAll()       
                    $("div").prevUntil()   
 查找所有兄弟标签：    $("div").siblings()  
              
 查找父标签：         $(".test").parent()              $(".test").parents()     
                    $(".test").parentUntil()

四操作元素（属性，css, 文档处理）

　　事件

页面载入：相当于js里的onload函数，等页面加载完再处理该函数里的内容
```
$(document).ready(function(){}) -----------> $(function(){})　
```

事件委派：（对新增的标该签事件也存在）

$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数（写了selector是委派给子标签，没写是本标签绑定事件）

事件切换：

$('').hover(function(){},function(){}) -----------> 第一个函数是鼠标悬浮的时候触发的函数，相当于mouseenter事件，第二个函数是鼠标离开时触发的事件，相当于mouseleave事件

　　属性操作：

css类

$("").addClass(class|fn) 增加一个属性
$("").removeClass([class|fn]) 删除某个属性

属性

$("").attr();  attr('class')取值，attr('class','c1')赋值
$("").removeAttr();
$("").prop();


//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。

$("").removeProp();

html 代码／文本／值

$("").html([val|fn]) //取该标签下的所有的子标签和文本
$("").text([val|fn]) //取标签文本
$("").val([val|fn|arr]) //取有固有属性value属性的值，比如input标签

css 属性操作

$("#c1").css({"color":"red","fontSize":"35px"})

　　each 循环

方式一$.each(obj,fn)　

li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
    console.log(i,x)
});

方式二：$("").each(fn) ---- $(this) 代指当前标签
```
$("tr").each(function(){
    console.log($(this).html())
})
```
备注：each 里的return 相当于python里的continue,只是退出单次循环，return false相当于break退出所有循环

　　文档节点处理：

//创建一个标签对象
    $("<p>")


//内部插入

    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//外部插入

    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");

//删除

    $("").empty()
    $("").remove([expr])

//复制

    $("").clone([Even[,deepEven]])

动画效果三组的操作都一样，只是效果有点区别

显示隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../day49/jquery-3.2.1.js"></script>
</head>
<body>
    <p>
        hello world
    </p>
    <button class="hides"> hide</button>
    <button class="shows">show</button>
    <button class="toggles">toggle</button>

    <script>
        $('.hides').click(function () {
            $('p').hide(1000)
        });
        $('.shows').click(function () {
            $('p').show(1000) 
        });
        //toggle 会自动判断状态，如是当前是隐藏的则显示，显示的则隐藏
        $('.toggles').click(function () {
            $('p').toggle(1000)
        })
    </script>
</body>
</html>

滑动 slideDown／slideUp/slideToggle
淡入淡出 fadeIn/fadeOut/fadeToggle

css操作

　　　　1 位置操作

        $("").offset([coordinates])
        $("").position()
        $("").scrollTop([val])
        $("").scrollLeft([val])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pane_move</title>
    <script src="../day49/jquery-3.2.1.js"></script>
    <style>
        *{padding: 0;
        margin: 0}
        .box{width: 200px;
            height: 200px;
            background-color: greenyellow}
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        //offset的定位以document的原点为参照物。
        var mouse_x = 0;
        var mouse_y = 0;
        
        $('.box').mouseover(function () {
            $(this).css('cursor','pointer')
            
        });

        $('.box').mousedown(function (e) {
            mouse_x = e.clientX;
            mouse_y = e.clientY;

            var orient_y = $('.box').offset().top;
            var orient_x = $('.box').offset().left;

            $(document).mousemove(function (e) {
               var new_x = e.clientX;
               var new_y = e.clientY;
               var x = new_x - mouse_x + orient_x;
               var y = new_y - mouse_y + orient_y;
               $('.box').offset({left:x,top:y})
            });

            $(document).mouseup(function () {
                $(document).off()
            })
        });
        
    </script>

</body>
</html>

offset示例，平移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css_position</title>
    <style>
        *{padding: 0;
        margin: 0}
        .box1{width: 200px;
            height: 200px;
            background-color: #84a42b;
        }
        .outer{position: relative}

        .box2{width: 200px;
            height: 200px;
            background-color: yellow}

    </style>

    <script src="../day49/jquery-3.2.1.js"></script>
</head>

<body>

    <div class="box1"></div>
    <div class="outer">
        <div class="box2"></div>
    </div>

    <script>
        //position和cssz中的position相似，以父标签为参照物，如果父标签没设position属性，则以设置了position的父标签的父亲为参照物。
        console.log($('.box1').position());
        console.log($('.box2').position())
    </script>
</body>

</html>

position说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>return_top</title>
    <script src="../day49/jquery-3.2.1.js"></script>
    <style>
        .box{width: 100%;
            height: 2000px;
            background-color: #999999}

        .return{width: 70px;
                height: 40px;
                font-weight: 800;
                color: white;
                background-color: #396bb3;
                line-height: 40px;
                text-align: center;
                position: fixed;
                bottom: 10px;
                right: 10px;
                display:none}
    </style>

</head>

<body>

    <div class="box"></div>
    <div class="return">TOP</div>

    <script>
        $(window).scroll(function () {
            if($(window).scrollTop()>200){
                $('.return').show()
            }
            else {
                $('.return').hide()
            }
        });

        $('.return').click(function () {
            $(window).scrollTop(0)
        })
        
    </script>
</body>
</html>

scroll示例　

     2 尺寸操作

        $("").height([val|fn])
        $("").width([val|fn])
        $("").innerHeight()
        $("").innerWidth()
        $("").outerHeight([soptions])
        $("").outerWidth([options])

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>tagsize</title>
    <script src="../day49/jquery-3.2.1.js"></script>
    <style>
        .box{width: 200px;
            height: 200px;
            background-color: #84a42b;
            padding: 50px;
            border: solid 10px greenyellow}
    </style>

</head>

<body>
    <div class="box"></div>
    <script>

        console.log($('.box').width()); //200 文本区
        console.log($('.box').height()); //200
        console.log($('.box').innerWidth()); //300 带padding 区
        console.log($('.box').innerHeight()); //300
        console.log($('.box').outerWidth()); //320 带border区
        console.log($('.box').outerHeight()); //320
    </script>

</body>
</html>

尺寸操作说明

posted @ 2017-08-16 15:19 皖心阅读(160) 评论(0) 收藏举报

刷新页面返回顶部

JQuery基础

公告