JQuery

最新推荐文章于 2022-10-17 22:07:41 发布

信代码，得永生

最新推荐文章于 2022-10-17 22:07:41 发布

阅读量131

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_23979811/article/details/108298277

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、Jquery介绍

简介：jQuery是一个轻量级JS库，是一个被封装好的JS文件，提供了更为简便的元素操作方式。
核心理念：Write less Do More
jQuery版本：
    jQuery 2.x  不在支持IE6.7.8
    jQuery 1.11.x

2、使用jQuery

1、引入jQuery文件
    <script src="jquery-1.11.3.js"></script>
    注意：jquery文件的引入操作必须要放在其他jquery的操作之前。
2、jQuery对象
    1、什么时Jquery对象
        jQuery对象是由jQuery对页面元素进行封装后的一种体现。
        jQuery中所提供的所有的操作都只针对jQuery对象，DOM对象不能用。
    2、工厂函数 - $()
        作用： 1、能够获取jQuery 对象
               2、能够将DOm对象转换为jQuery对象
        语法：
            $(选择器/DOM对象) eg:$("#d1");
            $() 能够将选择器和DOM对象封装成jQuery对象进行返回
    3、DOM对象和jQuery对象之间的转换
        DOM对象：只能使用DOM提供的操作，不能使用jQuery操作
        jQuery对象：只能使用jQuery操作，不能使用DOM操作
        1、将DOM对象转换为jQuery对象
            语法： var 变量 = $(DOM对象);
            注意：所有的jQuery对象在起名的时候，最好在变量名称前+$,用于区别DOM对象。
        2、将jQuery对象转换为DOM对象
            1、var dom对象 = jQuery对象.get(0);
            2、var dom对象 = jQuery对象[0];
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<h1>静夜思</h1>
	<p style="color:red">床前明月光</p>
	<p>疑似地上霜</p>
	<p>举头望明月</p>
	<p>低头思故乡</p>
	<button onclick="fun()">点击</button>
	<script src="select.html"></script>
	<script>
		function fun(){
			//jquery写法
			// var $p = $("p");
			// $p.css("color","red");
            // $p.css({"color":"red","font-size":"24px"});多个值，字典写。
			//DOM写法
			var elem = document.getElementsByTagName("p");
			for (var i = 0; i < elem.length; i++) {
				console.log(elem[i]);
				elem[i].style.color = "red";
			}
			
		}
	</script>
	
</body>
</html>
3、jQuery选择器
    1、作用
        获取页面上的元素们，返回值都是JQ对象所组成的数组。
        语法：$("选择器");
    2、基本选择器  id  class element
    3、层级选择器 
        1、$("selector1+selector2")
           名称：相邻兄弟选择器
           作用：匹配仅仅跟在selector1后面且满足selector2选择器的元素（可能多个）。
        
        2、$("selector1~selector2")
            名称：通用兄弟选择器
            作用：匹配selector1后面所有满足selector2选择器的元素。
    
        3、基本过滤选择器
            1、 ：first    只匹配到第一个元素
            2、 ：last     只匹配到最后一个元素
            3、 ：not(selector) 将满足selector选择器排除出去
            4、 ：odd      匹配偶数行元素（奇数下标）     
            5、 ：even     匹配奇数行元素（偶数下标） 
            6、 ：eq(index) 匹配下标等于index的元素
            7、 : gt(index)  匹配下标大于index的元素
            8、 ：lt(index) 匹配下标小于index的元素
            <body>
	            <ul id="list">
		        <li>1111</li>
		        <li>2222</li>
		        <li>3333</li>
		        <li>4444</li>
		        <li>5555</li>
		        <li>6666</li>
		        <li>7777</li>
		        <li>8888</li>
		        <li>9999</li>
	        </ul>
	        <button onclick="btnFilter()">基本过滤选择器</button>
	        <script src="select.html"></script>
	        <script>
		        function btnFilter(){
			        var $list = $("#list :odd");//筛选偶数行
                    var $list = $("#list li:not(:first)");//筛选除了第一个
			        $list.css("color","red");
		        }
	        </script>
	
            </body>

        4、属性选择器
            1、[attribute] 作用：匹配包含指定属性的元素。
                 eg: $("div[id]");
            2、[attribute=value] 作用：匹配属性值为value的元素
                 eg：$("div[id=main]") 等价于 $("#main")
            3、[attribute!=value] 作用：匹配属性值不是value的所有元素
            4、[attribute^=value] 作用：匹配属性值以value字符作为开始的元素
            5、[attribute$=value] 作用：匹配属性值以value字符作为结束的元素
            6、[attribute*=value] 作用：匹配属性值中包含value字符的元素
        5、子元素过滤选择器
            1、：first-child
                作用：匹配属于其父元素中的首个子元素（每个父元素的第一个元素）
            2、：last-child
                作用：匹配属于其父元素中的最后一个子元素
            3、：nth-child(n)
                作用：匹配属于其父元素中的第n个子元素

3、jQuery操作DOM

1、基本操作
    1、html()
        作用：获取或设置jQuery对象的HTML内容 等同于 innerHTML
        eg: var $div = $("#main");
            $div.html(); 没有参数，取值。
            $div.html("动态设置的文本"); 有参数，赋值。
    2、text()
        作用：获取和设置纯文本内容
        等同于：innerText
    3、val()
        作用：获取或设置表单控件的value值
        等同于：DOM中的value
2、属性操作
    1、attr()
        作用：读取 或 设置 jQuery对象的 属性值
        eg：1、$obj.attr("id"); 获取$obj对象的id属性值
            2、$obj.attr("id","container"); 设置对象id属性值
    2、removeAttr("attrName")
        作用：删除jQuery对象的attrName属性
        eg： $obj.removeAttr("class"); 删除class属性
3、样式操作
    1、attr("class","className")
        作用：使用 attr() 绑定 className 值到JQ对象的class属性上
    2、addClass("className")
        作用：追加className选择器到jq对象的class属性后
        返回值：jq对象
        eg： $obj = $obj.addClass("c1");
             $obj = $obj.addClass("c2");
              可以这样写：$obj.addClass("c1").addClass("c2")  （连缀调用）
            结果：<div id="obj" class="c1 c2"></div>
    3、removeClass("className")
        作用:将className属性值从class属性中移除
    4、removeClass()
        作用:清空class属性值
    5、toggleClass("className")
        切换样式：
            元素如果具备className属性值，则删除
            元素如果没有className属性值，则添加
    6、css("css属性名")
        作用：获取对应css属性的值
        eg:$obj.css("id") 获取id值
    7、css("css属性名","css属性值")
        作用：为元素设置css属性值（优先级高，直接写在了标签里面）
    8、css(JSQN对象) 设置多个属性值
        JSON对象，类似于python中字典的写法。
        ex: $obj.css({"color":"red","background-color":"orange"});
4、遍历节点
    1、children() / children(selector)
        作用:获取jq对象的所有子元素，或带有指定选择器的子元素，不考虑文本节点
        注意：只考虑子代元素，不考虑后代元素。
    2、next / next(selector)
        作用：获取jq对象的下一个兄弟元素/ 满足selector的下一个兄弟元素
    3、prev() / prev(selector)
        作用：获取jq对象的上一个兄弟元素/ 满足selector的上一个兄弟元素
    4、siblings() / siblings(selector)
        作用：获取jq对象的所有兄弟节点 / 满足selector的所有兄弟
    5、find(selector)
        作用：获取满足selector选择器的所有后代元素，后面所有层级
    6、parent()
        作用：查找jq对象的父元素
5、创建元素 & 插入元素
    1、创建
        语法：var $obj = $("创建的内容");
        注意：创建的内容必须是标记
        eg：var $div = $("<div id="xxx">xxxx</div>")
        或 创建好之后，在添加属性和内容
    2、插入元素
        1、内部插入
            1、$obj.append($new);
                将$new元素插入到$obj中最后又给子元素位置处。
            2、$obj.prepend($new);
                将$new元素插入到$obj中第一个子元素的位置处。
        2、外部插入
            作为兄弟元素插入到网页中
            1、$obj.after($new);
                将$new作为$obj的下一个兄弟节点插入到网页中
            2、$obj.befor($new)
                将$new作为$obj的上一个兄弟节点插入到网页中

4、jQuery中的事件处理

1、DOM加载完成后的操作
    1、$(document).ready(function{
            //DOM树加载完毕后要执行的操作
            //相当于是页面初始化
        });
    2、$().ready(function{
            //效果同上
        };)
    3、$(function(){
            //效果同上，用这个，简便。
            //可以写多个，onload不行只能一个。
        };)
2、jQuery事件绑定
    1、方式1
        $obj.bind("事件名称",事件处理函数);
        eg:$obj.bind("click",function(){
            //鼠标绑定事件。    
        });
    2、$obj.事件名称(function(){
            //方式2，绑定
        });
    常用事件：
        $obj.click(fn);
        $obj.mouseover(fn);
        $obj.mousemove(fn);
        $obj.mouseout(fn);
        $obj.keydown(fn);
        $obj.keypress(fn);
        $obj.keyup(fn);
        $obj.focus(fn);
        $obj.blur(fn);
        $obj.change(fn);
        $obj.submit(fn);
3、事件中的this
    在jquery事件中，this表示的就是触发档期按事件的DOM对象
4、事件对象 - event    
    在绑定事件的时候，允许传递event参数来表示事件对象。
    1、$obj.bind("事件名称",function(event){
        event 表示的就是事件对象
    });
    2、$obj.事件名称(fucntion(event){
        //event 表示的就是事件对象
    });
    event的使用方式 与 原生JS事件中的事件对象一致。
    1、事件源  event.target
    2、鼠标事件 event.offsetX
    3、键盘事件 event.which
5、激发事件操作
    $obj.事件名称();
    eg:$obj.click(); //触发$obj的click事件
       $obj.click(function(){});//为$obj绑定click事件
6、Jquery删除节点
    1、remove()
        语法：$obj.remove();
        作用：删除$obj元素
    2、remove("selector")
        语法：$obj.remove("selector");
        作用：将满足selector选择器的元素删除。
    3、empty()
        语法：$obj.empty();
        作用：清空 $obj 内容
7、jQuery 遍历操作
    方法：each()
    1、循环遍历jQuery数组
        $obj.each(function(i,obj){
            i:循环出来的元素的下标
            obj: 循环出来的元素（dom元素）
        });
    2、循环遍历JS数组（原生）
        1、将原生数组通过$()转换成jQuery数组
        2、$.each(原生数组,function(i,obj){
            i:遍历出来的下标
            obj：遍历出来的元素
        })

信代码，得永生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery

1、Jquery介绍简介：jQuery是一个轻量级JS库，是一个被封装好的JS文件，提供了更为简便的元素操作方式。核心理念：Write less Do MorejQuery版本： jQuery 2.x 不在支持IE6.7.8 jQuery 1.11.x 2、使用jQuery1、引入jQuery文件 <script src="jquery-1.11.3.js"></script> 注意：jquery文件的引入操作必须要放在其他j
复制链接

扫一扫

专栏目录