1.jQuery初步学习

一、变量声明
var 变量名
二、js的内置对象
1.window：浏览器窗口
2.location:浏览器的地址栏
3.document：文档
4.screen：屏幕
5.even：事件
三、js事件
1.onclick 单击时
2.onblur 失去鼠标焦点
3.onfocus：获得焦点
getElementById:通过id获取控件
value：表示控件的值
innerHTML：表示起始标签和结束标签之间的文本信息
style：样式控制
四、使用jquery
1.导入jquery框架

  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

当页面载入时所执行的操作，相当于body中的onload

 $(document).ready(function(e){
                alert("001");
            });

注意：
$是一个jqeury的全局对象–>jquery

     $(function(){代码});

是

     $(document).ready(function(e)});

的简写。

五、css中的选择器
1.标签选择器
标签名｛｝
2.类选择器
.类属性名｛｝
3.id选择器
# id属性名｛｝
六、jquery的选择器
优点：简洁、完善的事件处理机制

1.javascpript中选择控件的常用方法
getElemntById
2.jquery中的简写方式是 $("#id")、$ (“标签名”)、$(“.class属性名”)。
html:

     <body>
            <h1>标题一</h1>
            <h1>标题二</h1>
            <p id="one">aaaaaaaaaaaaaaa</p>
            <p>bbbbbbbbbbb</p>
            <p>ccccccccccc</p>
            <p>ddddddddddd</p>
        </body>

js:

      $("#one").css("backgroundColor","red");
      $("p").css({"backgroundColor":"#bbffaa",
         "color":"red"});
      $("p").eq(0).css("backgroundColor","red");

注意：.eq(0)是将p标签第一个元素背景变为红色。

3.一次更改多个标签：

 $("h1,#one").css("backgroundColor","green");

4.层次选择器
title
例：改变body中所有的div的属性：

    $("body div").css("backgroundColor","green");

例：改变 body子代div的属性：

    $("body>div").css("backgroundColor","red");

例：改变id为d1的下一个div的背景颜色

  $("#d1+div").css("backgroundColor","black");

例如：改变id为d1之后的所有div

    $("#d1~div").css("backgroundColor","black");

例如：改变d1后所有p标签的背景颜色

    $("#d1").siblings("p").css("backgroundColor","bbffaa");

猜你喜欢