jQuery入门学习总结

0.前言:
     最近学习了一下jQuery,现在总结一下,基本上是入门指导,IDE:WebStorm10.0.4,一些基本的操作和使用,写了一些小例子,现在贴出来,做一个学习的记录,也方便自己以后查看。
1.选择器:
        选择器,我认为是jQuery之中非常关键的一个点,因为对于网页页面(HTML文档)之中的元素的控制都是需要使用选择器的,jQuery的选择器可以分为两类,一类是基本选择器,另一类是过滤选择器,过滤选择器在我这次学习之中 的涉及比较少,大多数使用的是基本选择器:
         1.基本选择器:
         基本选择器又可以分为三类,CSS选择器,层级选择器,表单域选择器,使用较多的也就是CSS选择器,CSS在和jQuery一起使用之后变得更加强大了,这是一个切实的体会。现在就说一下如何选取,标签选择器,例如$("div"),html中的标签,ID选择器,$("#test"),test表示id="test",类选择器$(".test"),test表示class="test",通用选择器,$("*"),群组选择器$("selector1,selector2.......selectorN"),层叠选择器:$("form input") ,选择所有的form元素中的input元素 $("#main > *") ,选择id值为main的所有的子元素,$("label + input"),选择所有的label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素,$("#prev ~ div"),同胞选择器,该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
         2.过滤选择器:

基本过滤选择器: $("tr:first") ,选择所有tr元素的第一个,$("tr:last"),选择所有tr元素的最后一个 

2:事件:
       jQuery事件现在看来和我们平时所说编程语言里面的事件没有太大的区别(有点像MFC那种),例如你点击了一个按钮或者是某个div区域,那么就会反馈一个除法的事件,通常都是这么写的:
$(document).ready(function(){/*处理的函数或者是语句*/});
这句话表示的含义是,当整个页面刷新出来之后,再采取一些动作或者是操作,比如说对id为mybutton的元素点击了之后,想实现一些操作,这样,如下:
<script type="text/javascript" >
    $(document).ready(function(){//页面完全加载好之后才会有一下的效果!这句话的意思
        $("#mybutton").click(function(){
            $("#mybutton").css("color","red").css("width","500px");
        });
    });
在没有分离的情况之下,javascript语句都是写在<script></script>标签之中的,CSS文件都是写在<style></style>标签之中,如果是分离的,那么就采用src="/路径/文件名"来引用。另外一个比较有特点的是jQuery的链式风格,如这一句:$("#mybutton").css("color","red").css("width","500px");这种方式一般是对同一个选择出来的元素(element)来进行一连串的顺序操作。就我测试来看,是可以同时在一个语句之中触发多个效果的,例如:
$(document).ready(function(){
    $(".flip").click(function(){
        $(".panel").slideDown("slow").css("color","red");
        $(".flip").slideDown("slow").css("color","white");
        $("#mybutton").slideToggle(200).slideDown(300);
    });

3:Ajax:
          单独的Ajax还没有去研究,jQuery的Ajax自己看了一下,主要是两个,一个是$("selector").load(),另一个是$.get()/$.post()方法,一般比较多的使用$.get()。以下是使用的语法格式。
$("#div1").load("demo_test.txt");$("#div1").load("demo_test.txt #p1");  
$.get(URL,callback); $.post(URL,data,callback);
4:小问题:
       关于src的引用的方式的问题,第一种一般都是好的,第二种要是使用绝对路径一般都是有问题的,使用相对路径比较好使。
<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"><script type="text/javascript" src="./jquery-1.11.3.js">
这两种方式都是可以使用的,第二种一定要在和文件是同一个文件夹下面,第一种要去抱能够上网,然而谷歌的现在是不能用了。
5:学习链接:
http://blog.csdn.net/imba123456789/article/details/47107727
http://blog.csdn.net/imba123456789/article/details/47129569
http://www.php100.com/html/webkaifa/javascript/2012/0611/10527.html
6:示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery basic</title>
    <style type="text/css">
        .selected
        {
            background-color: Green;
        }
    </style>
    <!--<script type="text/javascript" src="http://ajax.Microsoft.com/ajax/jQuery/jquery-1.3.2.min.js">-->
    <script type="text/javascript" src="./jquery-1.11.3.js">

    </script>
    <style type="text/css">
        div.panel,p.flip
        {
            margin:0px;
            padding:5px;
            text-align:center;
            background:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        div.panel
        {
            height:120px;
            display:none;
        }
        p.my_ajax_first_test
        {
            margin: 0px;
            padding-left: 50%;
            padding-right: 100px;
            background-color: aqua;
            border: solid 2px aqua;
            text-align: center;
        }
        div.my_test p.p_test
        {
            width: 500px;
            height: 200px;
            background-color: crimson;
        }

    </style>

</head>
<>
<h3>jQuery构造函数</h3>
<p>我是测试文件,我的背景应该红色!</p>
<ul>
    <li>jQuery(expression,context)</li>
    <li>jQuery(html)</li>
    <li>jQuery(elements)</li>
    <li>jQuery(jQuery(fn))</li>
</ul>
<input type="button" id="mybutton" value="click me!"/>
<input type="button" id="mybutton2" value="哈哈!"/>

<div class="panel">
    <p>W3School - 领先的 Web 技术教程站点</p>
    <p>W3School,你可以找到你所需要的所有网站建设教程。</p>
</div>

<p class="flip">请点击这里</p>
<script language="JavaScript" type="text/javascript">
    jQuery("ul>li:first").addClass("selected");
    jQuery("ul>li:last").addClass("selected");

    $("p").css("background-color","red");
    $(this).css("background-color","yellow");
    $("#mybutton").click(function(){
        $("p").hide();
    });
    $(".flip").click(function(){
        $(".panel").slideDown("slow");
    });
    $(document).ready(function(){
        $("button").click(function(){
            var div=$("div");
            div.animate({height:'300px',opacity:'0.4'},"slow");
            div.animate({width:'300px',opacity:'0.8'},"slow");
            div.animate({height:'100px',opacity:'0.4'},"slow");
            div.animate({width:'100px',opacity:'0.8'},"slow");
        });
    });
    $(document).ready(function() {
        $("#p1").css("color", "green").slideDown(8000).slideUp(700).slideToggle("slow");/*无效*/

    });

    $("#mm").click(function(){
        $("#pp").slideUp(3000);
    });



    /*$('ul').append($('new item'));无效的,为什么?*/
</script>

<button>开始动画</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relativefixed absolute</p>
<div style="background:#98bf21;height:100px;width:100px;position:relative;"/>

<h1>测试</h1>
<p id="mm" style="background:#98bf21;height:100px;width:100px;position:relative;text-align: center">123</p>

<p id="pp" style="background:#98bf21;height:100px;width:100px;position:relative; text-align: center">dianwo</p>






    <P>123123123</P>
    <P>123123123</P>
    <P>123123123</P>
    <P  class="my_ajax_first_test" id="ajaxtest"></P>
    <!--加载abc.txt文件之中的内容-->
    <script type="text/javascript" language="JavaScript">
        $(document).ready(function()
        {
            $("#ajaxtest").load("abc.txt");

        });
        $("#ajaxtest").click(function()
        {
            $("#ajaxtest").slideUp(2000).css("color","red")
        });
        $("button").click(function(){//jQueryAjax方法$.load()方法
            $.post("demo_test_post.asp",
                    {
                        name:"Donald Duck",
                        city:"Duckburg"
                    },
                    function(data,status){
                        alert("Data: " + data + "
Status: " + status);
                    });
        });
        $(document).ready(function()
        {
            $("#test_button").click(function(){
                $.get("demo_test.asp",function(data,status){//jQueryAjax方法$.get()方法
                    alert("Data: " + data + "
Status: " + status);
                });
            });
        });


    </script>
<div class="my_test" id="test">
    <p  class="p_test" id="test_button" >
        这是我的测试!
    </p>
</div>
    </body>
</html>

醉饮山林,自是闲暇白云间。笑红尘,总是爱恨贪嗔痴。若问人间逍遥在,风生之谷,客从山来。
原文地址:https://www.cnblogs.com/prayjourney/p/12528151.html