JQ初级

最新推荐文章于 2024-08-17 11:49:10 发布

初相识.

最新推荐文章于 2024-08-17 11:49:10 发布

阅读量232

点赞数 2

本文链接：https://blog.csdn.net/qq_42737056/article/details/83273114

版权

一,JQ安装使用

当使用JQ时,JQ符号$与其框架或插件符号发生冲突,可以通过JQuery.noConflict()修改JQ符号

JQ的使用方法和JS差不多,不过要想使用JQ语句必须在SCRIPT前面导入JQ文件
<script src="js/jquery-3.3.1.js"></script>
console.log(jQuery);
console.log($);
console.log(window.jQuery);

var __$ = jQuery.noConflict();
	console.log(__$);
以上几种方法输出的内容都是一样的(都是JQ文档)

二,JQ的页面加载

JQ的命名规范:通常在名字的前面加上$

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>页面加载</title>

	<!-- 导入jq -->
	<script src="js/jquery-3.3.1.js"></script>

	<script type="text/javascript">
		// js页面加载完毕后,触发的事件回调方法
		window.onload = function () {
			console.log("window load 1");
		}
		window.onload = function () {
			console.log("window load 2");  // 5
			var div = document.querySelector('.div');
			console.log(div);
		}
		// 只能绑定一个(逻辑下方的)回调函数
		// 页面加载完毕后回调

		// jq文档加载完毕
		$(document).ready(function () {
			console.log('document load 1');  // 2
		})
		$(document).ready(function () {
			console.log('document load 2');  // 3
		})
		// 简写
		$(function () {
			console.log('document load 3');  // 4
		})

		console.log('normal load');  // 1

	</script>

</head>
<body>
	<div class="div"></div>
	<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
</body>
</html>

三,JQ功能总汇

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JQ功能总汇</title>
    <style>
        .active {
            border: 5px solid black;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1>JQ功能总汇</h1>
    <hr>
    <button class="b1">d1</button><button class="b2">d2</button>
    <div id="d1" class="div1"></div>
    <div id="d2" class="div2"></div>
</body>
<!--导入JQ-->
<script src="js/jquery-3.3.1.js"></script>
<!--JQ-->
<script>
    // 1,JQ选择器:满足css选择器语法
    var $div1 = $('.div1');
    console.log($div1);
//    2,文本操作
    $div1.text('不忘初心,方得始终');
    $div1.html('<b>加粗的字体</b>');
    // 3,样式操作
    $div.css('heigh',200);
    $div.css({
        width: '200px',
        "border-radius":'50%';
    })
    // JQ方法基本都是具有返回值,所以支持(建议)链式操作
    $div = $div.css("height",function(){
        console.log('js>>',this);//JS的this本身
        console.log('jq>>',$(this));//JQ的this本身
        console.log('>>>',$(this).width());//jq对象指向盒子的宽度
        return $(this).width() * 2;//jq默认添加单位
    });
    $div.css('background-color','red');
    $div.css('height',function() {
        console.log('js>>',this);
        console.log('jq>>',$(this));
        console.log('div的宽度>>>',$(this).width)
        return $(this).width() * 2;
    }).css("background-color", "red");
    // 4,类名操作
    $('.b1').click(function() {
        $div.toggleClass('active')
    })
    //5,事件操作
    $div.on('click',function() {
        //获取当前点击事件的索引
        var index = $(this).index();
        console.log('$div被点中了')
    })
    //获取中间一列(支持内容伪类)
    $('li:nth-child(3n-1)').om('click',function(){
        console.log('中间列')
        })
    //点击最后一排触发:索引匹配(gt()从括号了里面的数后面都执行,eq(4)只有索引为4的执行,lt(4)只有索引为4的不执行)
    $('li:gt(5)').on('click', function () {
		console.log("最后一排");
	})
    // 6,动画操作
    $('.b1').on('click',function() {
        //直接解释了如果类名存在active就用空格替换,如果不存在则添加active的类名
        $div.slideToggle();
    })
    //7,文档操作
    //创建标签
    var $p = $('<p></p>');
    //样式操作
    $p.addClass('p');
    $p.on('click', function () {
		console.log('div click');
	})
    //添加到页面
    $div.append($p);
    $div.appendTo($('body'));
</script>
</html>

四,JQ与JS之间的相互转化

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JQ与JS之间的相互转化</title>
    <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <h1>JQ与JS之间的相互转化</h1>
    <hr>
    <div></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    var $div = $('.div');
    //JQ>>>JS(添加内容)
    var div = $div[0];
    div.innerText = '不忘初心,方的始终';
    //JS>>JQ(为新的JQ添加类名)
    var $n_div = $(div);
    $n_div.addClass('div');
</script>
</html>