jQuery
是一个高效的。精简的且功能丰富的javascript工具库
入口
<script src="./js/jquery-3.6.1.min.js"></script>
</head>
<body></body>
<script>
// console.log(jQuery, $)
// 入口
$(function () {
// 入口 开始写jq代码
console.log(123)
})
</script>
选择器
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">123</div>
<div class="aa">111</div>
<div class="aa">111</div>
<div class="aa">111</div>
<div class="aa">111</div>
<div class="main">
<p>我是p标记</p>
<ul class="myul">
<li>xxxxx</li>
<li class="active">xxxxx</li>
<li>xxxxx</li>
<li>xxxxx</li>
</ul>
</div>
<input type="text" name="user" id="" />
<br />
<input type="text" name="user" id="" />
<br />
<input type="text" name="user" id="" />
<input type="password" name="pass" id="" />
<input type="button" value="按钮" />
<input type="text" name="newsletter" />
<input type="text" name="milkman" />
<input type="text" name="newsboy" />
</body>
<script>
// $是jQuery的简写
// $()构造函数
/*
$()就是jQuery()函数 通常被当作jQuery的 "选择器函数"
()括号中写选择器 用来获取html元素
$()函数的作用 对圆括号中选取的html元素自动循环遍历，然后组装成一个
jQuery对象返回
*/
// 基本选择器
// $('*').css('font-size', '20px')
// $('#box').css({ color: 'red', 'background-color': 'yellow' })
// $('div').css('color', 'blue')
// $('.aa').css('background-color', 'red')
// 属性选择器
// $('input[type="text"]').css({ border: '1px solid red' })
// $('input[type]').css({ border: '1px solid red' })
// $('input[name^="news"]').css({ border: '1px solid red' })
// $("input[name!='newsletter']").css({ border: '1px solid red' })
// $("input[name$='letter']").css({ border: '1px solid red' })
// 关系（层级）选择器
// $('div ul').css({ border: '1px solid red' })
// $('div>ul').css({ border: '1px solid red' })
// $('li.active').css({ border: '1px solid red' })
// $('p,ul').css({ border: '1px solid red' })
// jQuery新增的选择器
// 过滤选择器
// $('li:first').css({ border: '1px solid red' })
// $('.myul>li:last').css({ border: '1px solid red' })
// $('.myul>li:even').css({ border: '1px solid red' })
// $('.myul>li:odd').css({ border: '1px solid red' })
// $('.myul>li:eq(1)').css({ border: '1px solid red' })
// $('.myul>li:gt(1)').css({ border: '1px solid red' })
// $('.myul>li:lt(1)').css({ border: '1px solid red' })
// 选择器的方法
// children和find都是基于父元素查找子元素
// $('li').eq(1).css({ border: '1px solid red' })
// $('.myul').children().css({ border: '1px solid red' })
// $('li.active').siblings().css({ border: '1px solid red' })
// $('li.active').next().css({ border: '1px solid red' })
// $('li.active').prev().css({ border: '1px solid red' })
// $('li.active').nextAll().css({ border: '1px solid red' })
// $('li.active').prevAll().css({ border: '1px solid red' })
// $('.myul').find('.active').css({ border: '1px solid red' })
</script>
对象的写法
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
// console.log(document.getElementById('box')) null
// window.onload = function () {
// console.log(document.getElementById('box'))
// }
// window.onload = function () {
// console.log(1)
// }
// console.log($('#box'))
// 为了防止文档结构还没有完全加载就运行jQusery代码
// $(document).ready(function () {
// // 写jquery代码
// })
// 简写
$(function () {
// 写jquery代码
console.log($('#box'))
})
$(function () {
// 写jquery代码
console.log(123)
})
// 以上两种写法 相当于js中的window.onload = function(){}
// 区别
/*
1：执行时机
window.onload必须再网页中所有的内容都加载完毕之后才可执行(包括图片img)
$(document).ready(function () {})页面当中的DOM结构绘制加载完毕即可执行，可能
与dom元素关联的并未完全加载完
2：编写个数
window.onload只能写一个
$(document).ready(function () {})可以编写多个 并且都会执行
3：简化写法
window.onload没有简化写法
$(document).ready(function () {})可以简化为$(function(){})
*/
</script>
</head>
<body>
<div id="box">box</div>
</body>
jQuery对象和DOM对象
<script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="box">123</div>
<script>
// JavaScript通过js相关对象方法获取的对象
var box = document.getElementById('box')
// console.log(box)
// 通过jQuery包装后产生的对象 jQuery对象
// console.log($('#box'))
// 注意:jQuery对象无法应用Dom对象的任何方法，Dom对象无法应用jquery的任何方法
// jQuery对象和js对象可以相互转换
// var $c = $('#box')
// 第一种 转换为js对象
// var c = $c[0]
// console.log(c)
// 第二种 转换为js对象
// var c = $c.get(0)
// console.log(c)
// javascript对象转jQuery对象
var $cr = $(box)
console.log($cr)
</script>
</body>
DOM操作
<script>
// 属性操作与获取
// console.log($('.mytext').text())
// console.log($('.mytext').html())
// // $('.box').text("<a href='#'>超链接</a>")
// $('.box').html("<a href='#'>超链接</a>")
// console.log($('.mytext').width())
// console.log($('.mytext').height())
// $('.mytext').width(100)
// $('.mytext').height(100)
// console.log($('.mytext').innerWidth()) //width +padding
// console.log($('.mytext').innerHeight()) //height +padding
// console.log($('.mytext').outerHeight()) //width +padding+border
// console.log($('.mytext').outerWidth()) //height +padding+border
console.log($('a').attr('href'))
$('a').attr('href', 'http://www.baidu.com')
</script>
