1、jQuery的基本用法

1.1 jQuery引入

1.2 第一个jQuery测试

1.3 $(document).ready()与window.onload的区别

2、jQuery选择器

基本选择器的语法：$("选择器").action();

2.1 基本选择器

2.2 层次选择器

2.3 属性选择器

$("标签[属性]")

2.4 过滤选择器

标签名:过滤选择器；

作用：过滤指定标签；

可见性选择器

2.5 jQuery选择器注意事项

选择器的书写规范很严格，多一个或少一个空格，都会影响选择器的效果；

2.6 $("选择器").css()

2.7 $(this).find("标签名")

$(this)就是将这个dom对象转换成jquery对象，就可以对这个对象进行操作；

可以查找当前元素下的子元素；

html

//当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失

     
3三八线
加入看单
    
4吉详天宝
加入看单
    
5亲爱的翻译官
加入看单
    
6仙剑云之凡
加入看单
    
7权力的游戏第五季
加入看单
    
8琅琊榜
加入看单
    
9那年青春我们正好
加入看单
    
10乡村受情8（上）
加入看单

javascript

$("#play ol li").mouseover(function(){
	$(this).find("p").css({"display":"block"});
});
$("#play ol li").mouseleave(function(){
	$(this).find("p").css({"display":"none"}); //查找到当前元素的子元素
});


//还可以是使用:hidden 和 :visible  可见选择器
$("#play ol li").mouseover(function(){
    $(this).find("p:hidden").show();
});

$("#play ol li").mouseleave(function(){
    $(this).find("p:visible").hide();
});

$(this)表示当前元素，它还可以点出很多方法，需要的时候可以加个点看看有哪些；

常用方法

3、jQuery基本操作

3.1 样式操作

3.2 内容操作 html() text()

3.3属性值操作 val()

3.3.1获取单选框的值

$('input:radio[name="IsAvail"]:checked').val()

3.4 节点操作

3.4.1 创造节点

$()用于获取或创建节点

3.4.2 插入节点

1 元素内部插入子节点

注意：jq中已经创建好的同一节点，多次执行插入，只会执行一次

var $node2 = $("
上海新增本土54例
");
$node2.appendTo($("ul")); //执行
//jq中已经创建好的同一节点，多次执行插入，只会执行一次
$node2.appendTo($("ul")); //不执行

//只用每次创建新的节点，才会多次执行
$("
罗永浩：那火烤中学高有问题
").prependTo($("ul"));//执行
$("
罗永浩：那火烤中学高有问题
").prependTo($("ul"));//执行

2 元素外部插入同辈节点

3.4.3 删除节点

3.4.4 替换节点

3.4.5 复制节点

3.5属性操作

3.6 节点遍历

3.6.1 遍历子元素

3.6.2 遍历同辈元素

3.6.3 遍历前辈元素

3.6.4 each() 遍历

例子

//遍历所有的li元素
//隐式迭代:自动遍历集合中的所有元素
$("li").each(function(index,elm){
    alert(index);
    alert($(elm).html());
});

$("li").each(function(){
//注意:elm时dom元素对象,不可以直接使用jQuery方法,必须是转化为jQuery节点
    alert($(this).html()); //$(this)转换为jQuery节点
});

3.6.5 end()

结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态；

//end():结束当前的最后一次筛选,恢复到初始状态
$(".gameList li").first().css("background-color","orange").end().last().css({"background-color":"pink"}); //可以选取到第一个li和最后一个li
//先选取第一个li，然后end()清除.first()的过滤，回到$(".gameList li")，在选取last()
//相当于两条语句：
/*
$(".gameList li").first().css("background-color","orange");
$(".gameList li").last().css({"background-color":"pink"});
*/

4、jQuery事件与特效

4.1 基础事件

4.1.1 鼠标事件

鼠标事件方法的区别

4.1.2 键盘事件

键盘按下灵活应用

//键盘按下事件，判断是否是enter键，并手动提交表单
$(document).keydown(function(even){
    if(even.keyCode == 13){
        if(confirm("确定要提交登录请求吗？")){
            alert("登录请求可以提交");
            //jQuery中手动提交表单
            $("form").submit();
        }else{
            alert("登录请求取消")
        }
    }
});

4.1.3 浏览器事件(了解)

4.1.4 window事件(了解)

4.1.5 表单事件(了解)

4.2 绑定事件和移出事件

4.2.1 绑定事件

4.2.1.1 绑定单个事件

bind(事件类型名，事件处理函数)；

//对指定元素绑定mouseover事件
$(".on").bind("mouseover",function(){
    $(".topDown").show();
});
//对指定元素绑定mouseout事件
$(".on").bind("mouseout",function(){
    $(".topDown").hide();
});

4.2.1.2 绑定多个事件

bind({事件名称：事件处理函数，事件处理名称：事件处理函数。。。})

//对指定元素，绑定mouseover和mouseout事件
$(".on").bind({
    "mouseover":function(){
        $(".topDown").show();
    },
    "mouseout":function(){
        $(".topDown").hide();
    }
});

4.2.2 移除事件

4.3 复合事件

4.3.1 hover

//复合事件：hover,相当于mouseover和mouseout的集合，并支持切换
$(".on").hover(function(){ 
    $(".topDown").show();
},function(){
    $(".topDown").hide();
});

4.3.2 toggle 1.9版本之后，移除了toggle()复合事件方法

4.3.3 toggle(),toggle(函数),toggleClass()区别

4.4 jQuery 动画效果

4.4.1 控制元素的显示及隐藏

toggle() 方法等于这两个方法

参数：可以为任意毫秒数或，slow,normal,fast;

4.4.2 改变元素的透明度(淡入淡出)

参数：可以为任意毫秒数或，slow,normal,fast;

4.4.3 改变元素高度(收缩)

参数：可以为任意毫秒数或，slow,normal,fast;

案例

4.4.4 自定义动画(了解)

5、项目中常用的知识点

5.1 自定义表单验证 required

自定义表单的input标签必须添加required属性，否则就不会触发；

//自定义用户名校验提示语，对浏览器默认提示语，进行统一修改
$("input[type=submit]").click(function(){	
    var userName = document.getElementById("userName");
    if(userName.validity.valueMissing){
        userName.setCustomValidity("用户名不能为空")
    }else if(userName.validity.patternMismatch){
        //正则校验提示
        userName.setCustomValidity("用户名不符合规则校验")
    }else{
        userName.setCustomValidity("");
    }
    
});

5.2 return false 的理解和用法

当表单提交事件，接收到false的返回值不会再提交表单内容，可以实现去除表单的默认提交处理(让from的action失败)，包括超链接；

$("form").submit(function(){
    // alert("监听表单提交事件");
    //提示是否确认登录请求
    if(!confirm("确认要进行登录吗？")){
    //当表单提交事件，接收到false的返回值不会在提交表单内容，可以实现去除表单的默认提交处理(让from的action失败)，包括超链接
        return false;
    }
});

5.3 stop(true,true)

stop(true,true)停止匹配当前正在执行的动画效果，解决快速移入移出导致的延迟效果;

//二级导航栏的下拉特效
$(".wel_rhelp").bind({
    "mouseenter":function(){
     //stop(true,true) 停止匹配当前正在执行的动画效果，解决快速移入移出导致的延迟效果
      $(".wel_rhelp_ul").stop(true,true).slideDown(1000);
    },
    "mouseleave":function(){
        $(".wel_rhelp_ul").stop(true,true).slideUp(1000);
    }
});

5.4 轮播图

html

    

        

            

            

            

        
        

            

                1
            
            

                2
            
            

                3
            
        
        

            

                
                
            
        
    

javaScript

$(function(){
    //调用轮播函数
    playBanner();
});


//自定义轮播图播放函数
function playBanner(){
    //初始化图片序号变量
    var bannerIndex = 0;

    //初始化标识，当鼠标移入到轮播图数字上，暂停轮播
    var bannerFlog = false; //默认不暂停，当为true才暂停

    //获取要轮播的图片对象集合
    var $bannerImgs = $(".slide_box").children("li");
    //获取要轮播的图片对应数字集合
    var $bannerNums = $(".num").children("li");

    //1.当鼠标移入轮播图移入到对应的数字上，显示对应的轮播图
    $bannerNums.mouseover(function(){
        //确定移入的是哪个数字
        bannerIndex = $bannerNums.index($(this));
        // alert(bannerIndex);

        //让对应轮播图数字的图片进行淡入
        $bannerImgs.eq(bannerIndex).fadeIn();

        //所有当前轮播图数字外其他图片都要淡出
        $bannerImgs.eq(bannerIndex).siblings().fadeOut();

        //当前轮播图的数字要高亮 actice类是让数字高亮
        $(this).addClass("active");

        //所有当前轮播图数字外其他的数字都要取消高亮
        $(this).siblings().removeClass("active");

        //修改轮播图true,暂停
        bannerFlog = true;

    }).mouseout(function(){
        //修改轮播标识为false,继续自动轮播
        bannerFlog = false;
    });

    //开启自动轮播
    setInterval(function(){

        // 判断当前是不是鼠标在某个轮播图片的数字上，如果是，不可以切换图片，否则继续
        if(bannerFlog){
            return;
        }

        //默认从第一个图片开始轮播，轮播到最后一个图片，如果鼠标移入到某个图片，从当前的图片开始轮播
        bannerIndex++;

        //如果轮播图片序号大于轮播图片总数，代表轮播到最后，要从头开始
        if(bannerIndex >= $bannerImgs.length){
            bannerIndex = 0;
        }
        
        //切换轮播图片
        $bannerImgs.eq(bannerIndex).stop(true,true).fadeIn().siblings().fadeOut();
        
        //切换对应的轮播数字
        $bannerNums.eq(bannerIndex).stop(true,true).addClass("active").siblings().removeClass("active");

    },3000);
}

5.5 jQuery 判断checked的三种方法:

赋值

5.6 prop()方法的应用

prop() 方法设置或返回被选元素的属性和值

prop(参数1，参数2)：

1. 参数1用于设置属性
2. 参数2设置属性值
   下面一个简单的案例来应用一下这个方法：

head部分

body部分

		

			

				

					

					
语文
					
数学
					
英语
				
			
			

				

					

					
55
					
66
					
61
				
				

					

					
68
					
23
					
58
				
				

					

					
35
					
35
					
88
				
				

					

					
36
					
58
					
21