jQuery基础之操作属性或文本及其样式位置尺寸的方法（重点，常用）

1 , $.holdReady(true);

作用: 暂停ready执行；可用于想当一个元素执行过后再渲染页面；实例如下：

 <script>     
        $.holdReady(true);
        $(document).ready(function () {
            alert("ready");
        });

	    var btn = document.getElementsByTagName("button")[0];
	    btn.onclick = function () {
	        $.holdReady(false);
	    }
</script>

2，jQuery内容选择器

$(“div:empty”);
$(“div:parent”);
$(“div:contains(‘我是div’)”);
$(“div:has(‘span’)”);

实例代码如下：

	<div></div>
	<div>我是div</div>
	<div>他们我是div123</div>
	<div><span></span></div>
	<div><p></p></div>

	 $(function () {
            // 编写jQuery相关代码
            // :empty 作用:找到既没有文本内容也没有子元素的指定元素
            // var $div = $("div:empty");
            // console.log($div);

            // :parent 作用: 找到有文本内容或有子元素的指定元素
            // var $div = $("div:parent");
            // console.log($div);

            // :contains(text) 作用: 找到包含指定文本内容的指定元素
            // var $div = $("div:contains('我是div')");
            // console.log($div);

            // :has(selector) 作用: 找到包含指定子元素的指定元素
            var $div = $("div:has('span')");
            console.log($div);
        });

3，属性和属性节点

1.什么是属性?
对象身上保存的变量就是属性
2.如何操作属性?
对象.属性名称 = 值;
对象.属性名称;
对象[“属性名称”] = 值;
对象[“属性名称”];

3.什么是属性节点?
<span name = “it666”></span>
在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点

4.如何操作属性节点?
DOM元素.setAttribute(“属性名称”, “值”);
DOM元素.getAttribute(“属性名称”);

5.属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点

3.1通过js进行操作属性

	 $(function () {
			//通过js进行操作
            function Person() {
            }
            var p = new Person();
            // p.name = "lnj";
            p["name"] = "zs";
            // console.log(p.name);
            console.log(p["name"]);

            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name", "lnj");
            console.log(span.getAttribute("name"));
        });

3.2通过jQuery进行操作属性

通过attr(),removeAttr()

 $(function () {
           /*
            1.attr(name|pro|key,val|fn)
            作用: 获取或者设置属性节点的值
            可以传递一个参数, 也可以传递两个参数
          	  如果传递一个参数, 代表获取属性节点的值
          	  如果传递两个参数, 代表设置属性节点的值

            注意点:
          	  如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
          	  如果是设置:找到多少个元素就会设置多少个元素
          	  如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

            2.removeAttr(name)
         	   删除属性节点

            注意点:
         	   会删除所有找到元素指定的属性节点，删除多个用空格隔开

           */
            // console.log($("span").attr("class"));
            $("span").attr("class", "box");
            // $("span").attr("abc", "123");

            // $("span").removeAttr("class name");
        });

通过prop(),removeProp()

	 $(function () {
            /*
            1.prop方法
         	   特点和attr方法一致
            2.removeProp方法
        	    特点和removeAttr方法一致
            */           
            $("span").eq(0).prop("demo", "it666");
            $("span").eq(1).prop("demo", "lnj");
            console.log($("span").prop("demo"));

            $("span").removeProp("demo");
            /*
            注意点:
            prop方法不仅能够操作属性, 他还能操作属性节点

            官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，
            其他的使用 attr()
            */
            // console.log($("span").prop("class"));
            // $("span").prop("class", "box");

            console.log($("input").prop("checked")); // true / false
            console.log($("input").attr("checked")); // checked / undefined

        });

4，jQuery切换类的方法（js className）

添加一个类.addClass(class|fn)

删除一个类.removeClass([class|fn])

切换类.toggleClass(class|fn[,sw])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-jQuery操作类相关的方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .class2{
            border: 10px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.addClass(class|fn)
            作用: 添加一个类
            如果要添加多个, 多个类名之间用空格隔开即可

            2.removeClass([class|fn])
            作用: 删除一个类
            如果想删除多个, 多个类名之间用空格隔开即可

            3.toggleClass(class|fn[,sw])
            作用: 切换类
            有就删除, 没有就添加
            */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                // $("div").addClass("class1");
                $("div").addClass("class1 class2");
            }
            btns[1].onclick = function () {
                // $("div").removeClass("class2");
                $("div").removeClass("class2 class1");
            }
            btns[2].onclick = function () {
                $("div").toggleClass("class2 class1");
            }
        });
    </script>
</head>
<body>
	<button>添加类</button>
	<button>删除类</button>
	<button>切换类</button>
<div></div>
</body>
</html>

5，jQuery文本取值

1.html([val|fn])
和原生JS中的innerHTML一模一样
2.text([val|fn])
和原生JS中的innerText一模一样
3.val([val|fn|arr])

	<button>设置html</button>
	<button>获取html</button>
	<button>设置text</button>
	<button>获取text</button>
	<button>设置value</button>
	<button>获取value</button>
	<div></div>
	<input type="text">

  $(function () {
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                $("div").html("<p>我是段落<span>我是span</span></p>");
            }
            btns[1].onclick = function () {
                console.log($("div").html());
            }
            btns[2].onclick = function () {
                $("div").text("<p>我是段落<span>我是span</span></p>");
            }
            btns[3].onclick = function () {
                console.log($("div").text());
            }
            btns[4].onclick = function () {
                $("input").val("请输入内容");
            }
            btns[5].onclick = function () {
                console.log($("input").val());;
            }
        });

6,jQuery操作css样式的方法

$(“div”).css(“width”, “100px”);
在js中可通过cssTest进行设置，element.style.cssText = ‘height: 100px；’

 $(function () {
            // 编写jQuery相关代码
            // 1.逐个设置
            $("div").css("width", "100px");
            $("div").css("height", "100px");
            $("div").css("background", "red");

            // 2.链式设置
            // 注意点: 链式操作如果大于3步, 建议分开
            $("div").css("width", "100px").css("height", "100px").css("background", "blue");

            // 3.批量设置
            $("div").css({
                width: "100px",
                height: "100px",
                background: "red"
            });

            // 4.获取CSS样式值
            console.log($("div").css("background"));;
        });

在这里插入代码片

7，jQuery位置和尺寸的操作方法

offset([coordinates])
作用: 获取元素距离窗口的偏移位
position()
作用: 获取元素距离定位元素的偏移位
position方法只能获取不能设置

	<div class="father">
	    <div class="son"></div>
	</div>
	<button>获取</button>
	<button>设置</button>

	<style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background: red;
            border: 50px solid #000;
            margin-left: 50px;
            position: relative;
        }
        .son{
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>

	 $(function () {
            // 编写jQuery相关代码
            var btns = document.getElementsByTagName("button");
            // 监听获取
            btns[0].onclick = function () {
                // 获取元素的宽度
                // console.log($(".father").width());
                // offset([coordinates])
                // 作用: 获取元素距离窗口的偏移位
                // console.log($(".son").offset().left);
                // position()
                // 作用: 获取元素距离定位元素的偏移位
                console.log($(".son").position().left);
            }
            // 监听设置
            btns[1].onclick = function () {
                // 设置元素的宽度
                // $(".father").width("500px")

                // $(".son").offset({
                //     left: 10
                // });

                // 注意点: position方法只能获取不能设置
                // $(".son").position({
                //     left: 10
                // });

                $(".son").css({
                    left: "10px"
                });
            }
        });
    </script>

8，jQuery中scrollTop方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>23-jQuery的scrollTop方法</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.scroll {
				width: 100px;
				height: 200px;
				border: 1px solid #000;
				overflow: auto;
			}
		</style>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			$(function() {
				// 编写jQuery相关代码
				var btns = document.getElementsByTagName("button");
				// 监听获取
				btns[0].onclick = function() {
					// 获取滚动的偏移位
					console.log($(".scroll").scrollTop());
					// 获取网页滚动的偏移位
					// 注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
					console.log($("body").scrollTop() + $("html").scrollTop());
				}
				btns[1].onclick = function() {
					// 设置滚动的偏移位
					$(".scroll").scrollTop(300);
					// 设置网页滚动偏移位
					// 注意点: 为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
					$("html,body").scrollTop(300);
				}
			});
		</script>
	</head>
	<body>
		<div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div</div>
		<button>获取</button>
		<button>设置</button>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>

posted @ 2022-04-02 09:48 coderwcb 阅读(45) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery基础（jQuery概念，jQuery与js入口函数的区别及其入口函数的其他写法和冲突问题）

· javscript DOM基础知识（常用篇）

· jQuery 常用API

· jQuery属性，元素

· jQuery中改变页面样式

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

jQuery基础之操作属性或文本及其样式位置尺寸的方法（重点，常用）

相关知识点导航

1 , $.holdReady(true);

2，jQuery内容选择器

3，属性和属性节点

3.1通过js进行操作属性

3.2通过jQuery进行操作属性

通过attr(),removeAttr()

通过prop(),removeProp()

4，jQuery切换类的方法（js className）

5，jQuery文本取值

6,jQuery操作css样式的方法

7，jQuery位置和尺寸的操作方法

8，jQuery中scrollTop方法

搜索

最新随笔

积分与排名

随笔分类 (3)

相册 (6)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

jQuery基础之操作属性或文本及其样式 位置 尺寸的方法（重点，常用）

相关知识点导航

1 , $.holdReady(true);

2，jQuery内容选择器

3，属性和属性节点

3.1通过js进行操作属性

3.2通过jQuery进行操作属性

通过attr(),removeAttr()

通过prop(),removeProp()

4，jQuery切换类的方法（js className）

5，jQuery文本取值

6,jQuery操作css样式的方法

7，jQuery位置和尺寸的操作方法

8，jQuery中scrollTop方法

搜索

最新随笔

积分与排名

随笔分类 (3)

相册 (6)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

jQuery基础之操作属性或文本及其样式位置尺寸的方法（重点，常用）