jQuery 的写法和相对应的选择器dom以及动态效果的展示

最新推荐文章于 2019-10-28 18:02:15 发布

萧十一郎XA

最新推荐文章于 2019-10-28 18:02:15 发布

阅读量435

点赞数

分类专栏： jQuery 文章标签： jQuery 选择器 dom 动态效果

本文链接：https://blog.csdn.net/XA5851477/article/details/68066132

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.jQuery 是一个轻量级的javascript的框架对javascript进行了封装
提供了很多操作方式供开发者直接调用

2.jQuery的特点：写的少做得多
a:强大的选择器
b：出色的dom操作
c：良好的兼容性
d：可以提供方面的ajax操作

3.怎么写 jQuery
a：引入jQuery
<script type="text/javaScript" src="jQueryxx.xx.js"></script>
jQuery 有不同的版本
jQuery1.xxxx.js
jQuery2z.xxxx.js

b.写法
1.复杂写法
$(document).ready(
function () {
alert("aa");
});
2.简写
$(function () {
alert("bb");
})
c:选择器
1.id选择器：
$(function () {
alert($("#box").html());//获取id为box的内容且包括样式
alert($("#box").text());//只获取id为box的内容不包括样式
alert($("#box").html("<font>aaa</font>"));//将id为box的内容换成aaa且包括样式
alert($("#box").text("<font>aaa</font>"));//将id为box的内容换成<font>aaa</font>且不包括样式
//如果.html() .text() 中含有内容则替换原有内容，不然则输出原有内容
})
2.class选择器
$(function () {
$(".mybox").text("<font color='#ff0000'>bbbb</font>");
$(".mybox").html("<font color='#ff0000'>bbbb</font>");
});
3.标签选择器中选择子代
$(function () {
$("p:eq(2)").text("bbbb"); //获取第三个p标签 eq（x）
x从0开始算
$("p:even").css({"background":"#ff0000"}); //获取奇数p标签
$("p:odd").css({"background":"#0000ff"}); //获取偶数p标签
});

<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</body>
4.相邻标签选择器的使用
$(function () {
//$("div p").css({"background":"#ff0000"});//后代选择器
// $("div>p").css({"background":"#0000ff"});//子代选择器
$("div+p").css({"background":"#0000ff"});//紧跟在div后面的第一个p
$("div~p").css({"background":"#0000ff"});//匹配div后面的所有p
});
</script>

</head>
<body>
<p>段落1</p>
<div><p>段落2</p></div>
<p>段落3</p>
<div>
<ul><li><p>段落4</p></li></ul></div>
<p>段落5</p>
5.dom 操作
$(function () {
// $("#img").attr({src:"images/gotoTop1.png",
// width:50,
// title:"这是一张图片"
// });
// $("#img").removeAttr("title");
// $("#img").addClass("box"); //添加类样式
// $("#img").removeClass("box"); //删除类样式
// //如果存在就删除类样式，不存在就添加类样式
// $("#img").toggleClass("box");
// $("#img").toggleClass("box");
var a = $("#shu").val("admin"); //获取id为shu的输入框并将初始值设为admin
alert(a.val()); //获取输入的值
});
6.文档操作
function add() {
$("#box").append("<div class='mybox'></div>");//在boxdiv后放一个属性为mybox的div
$("<div class='mybox'></div>").appendTo($("#box"));//将一个属性为mybox的div放在boxdiv后
$("#box").before("<div class='mybox'></div>");//在boxdiv前放一个属性为mybox的div
}
function bao() {
$("#bao").wrap("<div class='mybox'></div>");//将baodiv用myboxdiv包含起来
}
function addquestion() {
$("ol").append("<li><input type='text'/></li> ");//在ol中添加li li中添加输入框
}
function deletequestion() {
$("ol li:last").remove();//将ol 中的最后一个li删除
}
7.动态效果展示
function show(){
$("#box").show(2000).delay(2000).hide(2000);//将boxdiv在两秒的时间内展现出来，
// 然后停留两秒，最后在两秒的时间内消失
}

$( function(){
$("#box").slideDown(2000).delay(2000).slideUp(2000);//将boxdiv在两秒的时间内下降展现出来，
// 然后停留两秒，最后在两秒的时间内上升消失
});
4.软件的版本
xxxx@ 内测版本
xxxxB 内测完成已经修复了基本功能的bug 可以供外部用户测试的版本
xxxxR 最终版本正式版本
软件名_大版本号_小版本号.js
一般仅仅修改功能，新加入小功能 -》改小版本号
遇到整体架构大功能的发布 -> 改大版本号

5.
区别： window.onload $(document).ready()
只能加载一次可以执行多次

在页面所有元素加载完成后才能执行在页面的所有标签加载完成后就可以触发