jQuery

初始jQuery

jQuery简介

1、jQuery由美国人Jhon Resig于2006年创建

2、 jQuery是由目前最流行的Javascript程序库,它是对Javascript对象和函数的封装
3、他的设计理念是写最少的代码,做最多的事(write less,do more)

jQuery获取链接:http://jquery.com

jQuery语法

jQuery的语法结构

组成说明 和作用
$()工厂函数
将DOM对象转换为jQuery对象
selector选择器
获取需要操作的DOM元素
action()方法
jQuery中提供的方法,其中包括绑定事件处理的方法

语法:$(“selector”).action();

jQuery操作页面元素

方法语法
addClass()语法:jQuery对象.addClass([class名]);
示例:$(" current").addClass(“current”);
css()语法:设置一个css样式:css(“属性”,“属性值”)
设置多个css样式:css({“属性”:“属性值”,“属性”:“属性值”})
show()
hide()
语法:显示:dollar符 (“current”).show() ;
隐藏:$(“current”).hide()
next()链式操作

$ = jQuery

jQuery链式操作和隐式迭代

链式操作

$(".stripe
tr").mouseover(function(){ 
        $(this).addClass("over");})
$(".stripe
tr").mouseout(function(){ 
        $(this).removeClass("over");
})


但是我们写成了:

$(".stripe
tr").mouseover(function(){ 
            
$(this).addClass("over");}).mouseout(function(){
                
$(this).removeClass("over");})

因为鼠标移入移除都是发生在同一个对象上的,所以我们可以将发生在同一个对象上的动作连起来写,这样子如果有很

多对象并且在他们身上发生了很多动作那么就会节省很多代码
<body>
<ul>
    <li id="frIstLi">HTML</li>
    <li>css</li>
    <li>java</li>
    <li>js</li>
    <li>jQuery</li>
    <li>oop</li>
    <li>api</li>
    <li>mysql</li>
</ul>

<script src="js/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function (){
        $("#frIstLi").css("color","pink").next().css("color","red")
    })
</script>
</body>

隐式迭代

1、在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用,这就叫做隐式迭代
 
2、我想把ul下的每个li都加个样式jquery写法就是:$(“ul li”).addClass(“test”),就是把ul下的每一个li都加了test的样式,我们并没有去取得所有li然后循环加样式
 
3、如果获取的是多元素的值,大部分情况下返回的是第一个元素的值
 
4、each方法:大部分情况下是不需要使用each方法的,因为jquery有隐式迭代的特性,但是如果要对每个元素做不同的处理就要用到each方法了

<ul>
    <li>HTML</li>
    <li>css</li>
    <li>java</li>
    <li>js</li>
    <li>jQuery</li>
    <li>oop</li>
    <li>api</li>
    <li>mysql</li>
</ul>

<script src="js/jquery-1.8.3.js"></script>
<script>
    $(document).ready(function (){
        // $("li").css({"font-wight":"bolder","color":"green"})
        // for (let i = 0; i < $("li").length; i++) {
        //     $("li")[i].click=function (){
        //         for (let j = 0; j < $("li").length; j++) {
        //             $("li")[i].style.color = '';
        //         }
        //         $("li")[i].style.color = 'pink';
        //     }
        // }
        $("li").each(function (){
            $("li").click(function (){
                $("li").css({"font-wight":"bolder","color":"green"})
            })
        })
    })
</script>

jQuery对象和dom对象相互转换

案例:

    //通过js方法,获取dom对象
    // var h1 = document.getElementsByTagName("h1")[0];
    // h1.innerHTML="操作dom对象";

    //dom对像·像转换为jQuery对象,通过工厂函数进行转换
    // let $1 = $(h1);
    // $1.html("操作dom对象转换为jQuery对象")

    //通过jQuery方法获取jQuery对象
    let $h1 = $("h1:eq(0)");
    $h1.html("操作jquery对像")
    
    //讲jQuery对象转换为dom对象:方法有两种--->方法一:get(0)   方法二:[0]
    方法一:
    let newH1 = $h1.get(0);
    newH1.innerHTML = "操作jQuery对象转换为dom对象"


    方法二:
    let newH1 = $h1[0];
    newH1.innerHTML = "操作jQuery对象转换为dom对象"
    
    
    
    // 总结
    //     dom对像转jQuery对象:$()
    //     jQuery对象转dom对象:get(0)   [0]

jQuery选择器

jQuery选择器功能强大,种类也很多,分类如下

通过css选择器选取元素
基本选择器、层次选择器、属性选择器
通过过滤选择器选取元素
基本过滤选择器
可见性过滤选择器

属性选择器

通过HTML元素的属性来选择元素
在这里插入图片描述

      //包含该属性
      $("a[href]").css("background","red")

      //包含该属性并且属性值等于绝对值
      $("a[href='abc']").css("background","pink")

      //包含该属性并且属性值不等于绝对值
      $("a[href!='abc']").css("background","pink")

      //属性值以xxx开头
      $("a[href^='https']").css("background","pink")

      //属性值以xxx结尾
      $("a[href$='html']").css("background","red")

      //属性值包含xxx
      $("a[href*='a']").css("background","green")

层次选择器

通过DOM元素之间的层次关系来获取元素
在这里插入图片描述

        //后代选择器
        $("ul li").css("background","pink");
        //子代选择器
        $("ul>li").css("background","green");
        //相邻选择器
        $(".js+li").css("background","#ccc");
        //同辈选择器
        $(".js~li").css("background","pink");
        //所有兄弟选择器
        $(".js").siblings().css("background","pink");

基本选择器

基本选择器包括标签、类、ID、并集和全局
在这里插入图片描述

        //标签选择器
        $("h1").css("color","red")

        //类选择器
        $("h2").css("color","green")

        //id选择器
        $("#h3").css("color","pink")

        //并集选择器
        $("h1,.h2,#h3").css("color","red")

        //全局选择器
        $("*").css("color","#ccc")

可见性过滤选择器

通过元素显示状态来选取元素
在这里插入图片描述

$(":visible").hide()//所有显示的元素隐藏
$(":hidden").show()//所有隐藏的元素显示

基本过滤选择器

在这里插入图片描述
在这里插入图片描述

			//获取contain下所有的标题元素
$(".contain :header").css({"background":"pink","font-size":"20px"})

			//获取偶数行的li
$("li:even").css("background","#CCC")

			//获取奇数行的li
$("li:odd").css("background","red")

			//获取第一个li
$("li:first").css("color","yellow")

			//获取最后一个li
$("li:last").css("color","blue")

			//获取大于某某索引的li元素
$("li:gt(3)").css("font-size","25px")

			//获取小于某某索引的li元素
$("li:lt(3)").css("font-size","5px")

			//等于某索引值
$("li:eq(3)").css("background","yellow")

事件(jQuery事件是对javascript事件的封装,常用事件分类:)

基础事件:

鼠标事件

方法描述执行时机
click()触发或将函数绑定到指定元素的click事件单机鼠标时执行
mouseover()触发或将函数绑定到指定元素mouseover事件鼠标移过时
mouseout()触发或将函数绑定到指定元素mouseout事件鼠标移出时
mouseenter()触发或将函数绑定到指定元素mouseenter事件鼠标进入时
mouseleave()触发或将函数绑定到指定元素mouseleave事件鼠标离开时
		$(function (){
			$(".nav-box .wrap .nav-ul li a").mouseover(function (){
				$(this).css("color","orange")
			}).mouseout(function (){
				$(this).css({"color":"#FFF","display":"none"}).slideDown("slow")
			})
		});

mouseover And mouseout 对比 mouseenter And mouseleave

<body>

<h1>mouseover And mouseout</h1>
<div class="out">
    <span></span>
    <div class="inner"></div>
</div>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    // const
    $(function (){
        var count = 0;
        var count1 = 0;
        //鼠标移入
        $(".out").mouseover(function (){
            $("span").text("鼠标移入移除的次数是"+(++count));
            //鼠标移出
        }).mouseout(function (){
            $("span").text("鼠标移出移除的次数是"+(++count1));
        })
    });
</script>
</body>
<body>
<h1>mouseenter And mouseleave</h1>
<div class="out">
    <span></span>
    <div class="inner"></div>
</div>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    // const
    $(function (){
        var count = 0;
        var count1 = 0;
        //鼠标进入
        $(".out").mouseenter(function (){
            $("span").text("鼠标移入移除的次数是"+(++count));
            //鼠标离开
        }).mouseleave(function (){
            $("span").text("鼠标移出移除的次数是"+(++count1));
        })
    });
</script>
</body>

鼠标事件方法的区别

方法相同点不同点
mouseover()
mouseenter()
鼠标进入备选元素时触发鼠标在其备选元素的子元素上来回进入时触发mouseover(),不触发mouseenter()
mouseout()
mouseleave()
鼠标离开备选元素时触发鼠标在其备选元素的子元素上来回进入时触发mouseout(),不触发mouseleave()

window窗口事件

方法描述
$(window).resize();调整窗口大小时
属性描述
window.innerHeight浏览器高度
window.innerWidth浏览器宽度
    $(function (){
        var i=0;
        $(window).resize(function (){
            console.log("窗口发生变化:"+(i++)+"c")
            console.log("窗口的宽度:"+window.innerWidth)
            console.log("窗口的高度:"+window.innerHeight)
        })
    })

键盘事件

用户每次按下或释放

属性描述
.keyCode键值码
方法描述执行时机
keydown()触发或函数绑定到指定元素的keydown事件键盘按下时
keyup()触发或函数绑定到指定元素的keyup事件键盘抬起时
keyprees()触发或函数绑定到指定元素的keypress事件产生可打印字符时
$(function (){
		//.keyup()  当键盘抬起的时候
		$("[type=password]").keyup(function (event){
			$("#events").append("抬起时"+event.keyCode+"<br/>")
		}).keydown(function (){
			$("#events").append("按下时"+event.keyCode+"<br/>")
		}).keypress(function (){
			$("#events").append("产生可打印的字符"+event.keyCode+"<br/>")
		})



		$(document).keydown(function (event){
			if (event.keyCode==13){
				alert("您按下了回车键")
			}else if(event.keyCode==91){
				alert("你按下了win键")
			}
		})
	})

表单事件

第八章:jquery操作dom对象

jquery对javascript中的DOM操作进行了封装jquery中的DOM操作

样式操作

设置单个样式:.css("属性名称","属性值")

设置多个样式:.css({"属性名称1":"属性值1","属性名称2":"属性值2"})

获取样式值: .css("属性名称")

添加类样式: .addClass("类样式名称 类样式名称")

移除类样式: .removeClass("类样式名称 类样式名称")

切换类样式: .toggleClass("类样式名称 类样式名称")

判断元素是否包含指定的样式: .hasClass("类样式名称 类样式名称")	返回值boolean
    <style>
        #p3{
            color:red;
            font-size: 11px;
        }
        .addClass{
            color: #3facc0;
            background-color: #4dc83a;

        }
        .c{
            color: #9999CC;
        }
    </style>
</head>
<body>

<p id="p1">设置单个样式</p>
<p id="p2">设置多个样式</p>
<p id="p3">获取样式值</p>
<p id="p4">添加类样式</p>
<p id="p5">切换类样式</p>
<button>切换</button>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function (){
        <!--设置单个样式:.css("属性名称","属性值")-->
        $("#p1").css("background","red");
        
        <!--设置多个样式:.css({"属性名称1":"属性值1","属性名称2":"属性值2"})-->
        $("#p2").css({"background":"blue","color":"red"});

        <!--获取样式值: .css("属性名称")-->
        console.log($("#p3").css("color"));
        console.log($("#p3").css("font-size"));

        <!--添加类样式: .addClass("类样式名称")-->
        $("#p4").addClass("addClass");

        <!--移除类样式: .removeClass("类样式名称")-->
        $("#p4").removeClass(("addClass"));

        <!--切换类样式: .toggleClass("类样式名称")-->
        $("button:eq(0)").click(function (){
            $("#p5").toggleClass("c");
            console.log($("#p5").hasClass("c"));
        });
        
        <!--判断元素是否包含指定的样式: .hasClass("类样式名称")-->
        console.log($("#p5").hasClass("c"));

    })
</script>
</body>

内容及value值操作

获取元素中的html代码   			 .html();

设置元素中的html代码				.html("<h1>琪琪最美!</h1>")

获取元素中的文本内容				.text()

设置元素中的文本内容				.text("琪琪最美!")

元素失去焦点:					.blur()

元素获取焦点:					.focus()

获取元素的value属性值			.val()

设置元素的value属性值			.val("设置的属性值")
<body>
    <div id="father">
        <div id="son">
            son
        </div>
    </div>
    <input type="text">
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function (){
        // 获取元素中的html代码    .html();
        console.log($("#father").html());
        
        // 设置元素中的html代码	.html("<h1>琪琪最美!</h1>")
        $("#father").html("<h1>琪琪最美!</h1>")
        
        // 获取元素中的文本内容				.text()
        $("h1").text();
        
        // 设置元素中的文本内容				.text("琪琪最美!")
        $("h1").text("哦耶");
        
        // 元素失去焦点:					.blur()
        $("input:eq(0)").blur(function (){
            $((this)).css("background","#FFF")
            // 获取元素的value属性值			.val()
            console.log($(this).val(" "));
        })
        
        // 元素获取焦点:					.focus()
        $("input:eq(0)").focus(function (){
            $((this)).css("background","red")
            // 设置元素的value属性值		.val("设置的属性值")
            console.log($(this).val("请输入琪琪"));
        })
        
        // 获取元素的value属性值			.val()

        // 设置元素的value属性值			.val("设置的属性值")
    })
</script>
</body>

节点操作

获取或创建节点	

		工厂函数						 $("")
		
		通过选择器获取节点:			 $("selector")DOM节点转换为jQuery节点: 	 $("<p>")
		
		使用html字符串创建jQuery节点: $("<p>文字</p>")
		
元素内部追加子节点

		将A节点追加到B节点里			B.append(A)A节点追加到B节点里			A.appendTo(B)A节点追加到B节点最前		B.prepend(A)A节点追加到B节点最前		A.prependTo(B)
		
元素外部插入同辈节点

		将A节点插入到B节点之后		B.after(A)A节点插入到B节点之后		A.insertAfter(B)A节点插入到B节点之前		B.before(A)A节点插入到B节点之前		A.insertBefore(B)	
	
删除节点

		删除h1节点					$("h1").remove()
		
		清空h2节点					$("h2").empty()	

		删除整个节点					$("h2").detach()	

替换节点:

		将A节点替换为B节点			A.replaceWith(B)A节点替换为B节点			B.replaceAll(A)
		
克隆节点:

		克隆节点						$("selector").clone(true/false)

		复制节点,参数为true复制事件,false不复制事件
		
移除元素的属性
		removeAttr("属性名称")


nextAll() 获取点击元素之后的所有同级元素

prevAll()获取点击元素之前的所有同级元素

removeClass("cur")移除class="cur" 这个元素(移除css)

addClass("cur")给该元素添加class="cur"

效果:点击哪个框该框就就带有class="cur" 效果 其他框消失

节点属性操作

attr()
prop()      //一般用来操作checkbox是否被选中
removerAttr()

获取或创建节点 和 元素内部追加子节点

<body>
<span>琪琪</span>
<div></div>

<ul>

</ul>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
  $(function (){
获取或创建节点
      // 工厂函数						 $("")
      // 通过选择器获取节点:			 $("selector")

      console.log($("span").text());

      // 把DOM节点转换为jQuery节点: 	 $("<p>")

      let h1 = $("<h1>");
      h1.html("<s>琪琪真美</s>")
      $("div:eq(0)").append(h1)

      // 使用html字符串创建jQuery节点: $("<p>文字</p>")

      var h2 = $("<h2><s>琪琪3代</s></h2>");
      h2.appendTo($("h1"));

元素内部追加子节点
      // 将A节点追加到B节点里			B.append(A)

      var li = $("<li>");
      li.text("新创建的li")
      $("ul").append(li)

      // 将A节点追加到B节点里			A.appendTo(B)
      var li2 = $("<li>");
      li2.text("新创建的li2")
      li2.appendTo($("ul"))
	
	  // 将A节点追加到B节点最前		B.prepend(A)
      var li3 = $("<li>");
      li3.html("<s>新创建的琪琪3号</s>");
      $("ul").prepend(li3);

      // 将A节点追加到B节点最前		A.prependTo(B)
      var li4 = $("<li>");
      li4.html("<s>新创建的琪琪4号</s>");
      $("ul").prepend(li4);
  })
</script>
</body>

元素外部插入同辈节点

<body>
    <h3>琪琪</h3>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function (){
// 元素外部插入同辈节点
        // 将A节点插入到B节点之后		B.after(A)
        var h4 = $("<h4>琪琪h4</h4>");
        $("h3").after(h4);
        
        // 将A节点插入到B节点之后		A.insertAfter(B)
        var h5 = $("<h5>琪琪h5</h5>");
        h5.insertAfter($("h4"))
        
        // 将A节点插入到B节点之前		B.before(A)
        var h6 = $("<h6>琪琪h6</h6>");
        $("h3").before(h6)
        
        // 将A节点插入到B节点之前		A.insertBefore(B)
        var h1 = $("<h1><s>琪琪h6</s></h1>");
        h1.insertBefore($("h3"))
        
    })
</script>
</body>

节点遍历

遍历子元素

方法解释
.children()获取所有子元素
.find()获取所有子元素

遍历同辈元素

方法解释
.next()自己相邻的下一个兄弟元素
.prev()自己相邻的上一个兄弟元素
.siblings()除自己意外的所有同辈元素

遍历父级元素

方法解释
.parent()获取父级元素
.parents()获取所有的父级元素 或者 获取指定的元素
.closest()获取指定祖先及元素

其他遍历方法

方法解释
each()为每个匹配元素规定要运行的函数
end()结束当前链条中的最近的筛选操作,并将匹配元素还原为之前的状态

each()案例

<body>
<section>
    <img src="images/ad.jpg" alt="美梦成真系列抽奖"/>
    <ul>
        <li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
        <li><a href="#">苹果iPad mini</a></li>
        <li><a href="#">三星GALAXY</a></li>
        <li><a href="#">苹果iPhone 5</a></li>
    </ul>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function (){
        //语法:$(selector).each(function(index,element));
        //index:选择器的位置  element:当前的元素
        var str="";
        $("img").click(function (){
            $("ul li").each(function (){
                str+=$(this).text()+"<br/>"
            })
            $("section").append(str)
        })
    })
</script>
</body>




end()案例
<div class="contain">
    <h2>祝福冬奥</h2>
    <ul class="gameList">
        <li> 贝克汉姆:衷心希望北京能够申办成功!</li>
        <li> 姚明:北京申冬奥是个非常棒的机会!加油!</li>
        <li> 张虹:北京办冬奥,大家的热情定超乎想象!</li>
        <li> 肖恩怀特:我爱北京,支持北京申办冬奥会!</li>
    </ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
    $(function () {
        /*
        * end(): 结束当前链条中的最近的筛选操作,
        *          并将匹配元素还原为之前的状态
        * */

        $(".contain :header").css("background","yellow");

        $("ul li").eq(2).css("background","orange").end().last().css("background","#00e5ff");
    })

</script>
</body>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值