JQuery学习笔记-CSDN博客

本文链接：https://blog.csdn.net/Jsonyy/article/details/73744593

JS复习
* JavaScript:基本使用:
* ECMAScript:
* 变量：弱变量类型: var i;
* 数据类型:原始类型和引用类型.
* 语句
* 运算符
* 对象:
* String,Boolean,Date,Math,Number,正则…
* 全局函数:eval(),encodeURI(),encodeURIComponent(),decodeURI(),decodeURIComponent(),parseInt(),parseFloat()
* BOM:浏览器对象.
* window:
* Navigator:
* Screen:
* History:
* Location:
* DOM：文档对象.
* 获得元素:
* document.getElementById(),document.getElementsByName(),document.getElementsByTagName();
* 添加元素:
* element.appendChild(),element,insertBefore();
* 删除元素:
* element.removeChild();
* 创建元素:
* document.createElement(),document.createTextNode();
* 修改元素值:
* innerHTML属性:

jQuery概述

jQuery是一个JavaScript函数库
是一个轻量级的”写的少,做的多的”JavaScript库
包含以下功能
1.HTML元素选取
2.HTML元素操作
3.CSS操作
4.HTML事件函数
5.JavaScript特效和动画
6.HTML DOM遍历和修改
7.AJAX
8.Utilties
9.还提供大量插件

jQuery的安装 ##

使用HTML的的<script>标签引用他

<script src="jquery-1.10.2.min.js"/>

语法

通过jQuery 可以选取(查询)HTML元素 , 并对他们进行操作

基础语法

$(selector)

美元符号定义jQuery 选择符selector
实例:

$(this).hide() //隐藏当前元素
$("p").hide() //隐藏所有<p>元素
$("p.test").hide() //隐藏所有class="test"的<p>元素
$("#test").hide() //隐藏所有id="test"的元素

页面加载执行:

$(function(){
});
//另外一种写法
$(document).ready(function(){
   jquery代码
});

和JS不一样的是  效率比传统的window.onload要高 , 而且可以执行多次
传统window.onload是页面加载完后执行方法
jQuery是等页面的DOM数绘制完成后进行执行

JS对象和jQuery对象

JS的方法和jQuery的对象不能通用

$(function(){
   var d1 = $("#d1");
   d1[0].innerHTML="" //将jQuery对象转成js对象
   d1.get(0).innerHTML="第二种方法";

   var d2 = document.getElmentById("d1");
   $(d2).html("将js对象转成JQuery对象")
});

jQuery选择器

jQuery选择器基于元素的id 类类型属性属性值
他基于已经存在的css选择器 , 也有一些自定义的选择器
jQuery的强大就在于他的选择器

id选择器
$(“#id”)
.class选择器
$(“.class名”)
更多实例

$("*")  选取所有元素
$(this) 选取当前元素
$("p.intro") 选取class为intro的<p>元素
$("ul li:first") 选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child") 选取每个<ul>元素的第一个<li>元素
$("[href]") 选取带有href属性的元素
$("a[target='_blank']") 选取所有target属性值等于"_blank"的<a>元素
$(":button") 选取所有type="button"的<input>元素和<button>元素
$("tr:even") 选取偶数位置的<tr>元素
$("tr:odd") 选取奇数位置的<tr>元素

jQuery事件

js大多数的DOM事件都有一个等效的jQuery方法
例如:

$("#d1").click(function(){  });  点击
$("#d1").dblclick(function(){  }); 双击
$("#d1").moiseenter(function(){  }); 鼠标穿过
$("#d1").mouseleave(function(){  }); 鼠标离开
$("#d1").focus(function(){  }); 获得焦点
$("#d1").blur(function(){  }); 失去焦点
... ...

jQuery对属性操作的方法

attr()
使用方法一：$(“”).attr(“src”);
使用方法二：$(“”).attr(“src”,”test.jpg”);
使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});

prop();新版本的方法.
    * 使用方法一：$(“”).prop(“src”);
    * 使用方法二：$(“”).prop(“src”,”test.jpg”);
    * 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
removeProp();
addClass()
removeClass();

复选框全选和全不选
$(function(){
    // 获得上面的复选框:
    //var $selectAll = $("#selectAll");
    // alert($selectAll.attr("checked"));
    /*$selectAll.click(function(){
    // alert($selectAll.prop("checked"));
if($selectAll.prop("checked") == true){
    // 上面的复选框被选中
    $(":checkbox[name='ids']").prop("checked",true);
    }else{
    // 上面的复选框没有被选中
          $(":checkbox[name='ids']").prop("checked",false);
      }
});*/

简化 :

$("#selectAll").click(function(){
　　　　　$(":checkbox[name='ids']").prop("checked",this.checked);
    });
});

jQuery的DOM操作

* 常用的方法:
    * append();         ---在某个元素后添加内容.  
    * appendTO();       ---将某个元素添加到另一个元素后.
    * remove();         ---将某个元素移除.
遍历的方式一：
* $.each(objects,function(i,n){

});
遍历的方式二:
* $(“”).each(function(i,n){

});

$(function(){
                var arrs = new Array("张森","张凤","张芙蓉");
                // 将这个数组转成JQ的对象使用each方法.
                /*$(arrs).each(function(i,n){
                    alert(i+"   "+n);
                });*/

                $.each(arrs,function(i,n){
                    alert(i+"   "+n);
                });
            });

jQuery的事件切换

* toggle();     --单击事件的切换
* hover();      --鼠标悬停的切换