jQuery知识点

最新推荐文章于 2024-10-16 16:26:58 发布

guoxiaotiao

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量122

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/guoxiaotiao/article/details/121033490

版权

jQuery 选择器事件处理 DOM操作链式编程

关键词由CSDN通过智能技术生成

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery知识点

一、引用jQuery文件

<script src="xxxx.js"></script>
<script>
//用的jQuery语法
//保证网页内容加载完毕在执行
$(document).ready(function (){
//jquery代码
alert("hello,world");
})
$(function(){
    alert();
})

二、jquery基本选择器

<body>
<div>
<ul>
<li id="li1">1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
</ul>
</div>
</body>
<script src="xxx.js"></script>
<script>
//1.id选择器
$("#li1")
console.log(document.getElementById("li1"));
//类名
console.log($(".li3"));
//标签找
console.log($("li"));
//添加css样式
$("#li1").css("color","red");
var document.getElementById("li1");
//将dom对象转换为jquery对象
$(li1).css("color","red");
</script>

三、jquery方法

<body>
    我是div
</body>
<script src="xxx.js"></script>
<script>
    $("div").css("color","red");  //改变字体颜色
	$("div").css("font-size","30px");  //改变字体大小
	$("div").css("background-color","yellow");   //改变背景颜色
//合写
$("div").css({"color":"red","font-size":"30px","background-color":"yellow")});
//显示和隐藏
$("div").css("display","none");
$("div").show(); //显示
$("div").hide(); //隐藏
</script>

四、addClass方法

<style>
.con{
color:red;
font-size:20px;
background-color:green;
}
</style>
<body>
<div>我是div</div>
</body>
<script src="xxx.js"></script>
<script>
//添加类改变样式
$("div").addClass("con");
</script>

五、链式编程

<body>
<div>我是div</div>
</body>
<script src="xxx.js"></script>
<script>
$("div").css("color","red");
$("div").html("我不是div"); //改变内容
//链式编程
$("div").css("color","blue").html("我又是div了");
</script>

六、隐式迭代

内部迭代

<body>
<div>
<ul>
<li>1111111111111111</li>
<li>2222222222222222</li>
<li>3333333333333333</li>
</ul>
</div>
</body>
<script src="xxx.js"></script>
<script>
var lis=document.getElementByTagName("li");
//进行迭代
for(var i=0;i<lis.length;i++){
	lis[i].style.color="red"    
}
//第二种方式
console.log($("li"));
$("li").css("color","blue");
</script>

七、jquery和dom的相互转换

<body>
<div id="div2">我是div</div>
</body>
<script src="xxx.js"></script>
<script>
//dom对象转换为jquery对象   使用$包裹
var div2=document.getElementById("div2");
$("div2").css("color","red");
//jquery转换为dom对象  通过下标获取
$("div")[0].style.color="red";
</script>

八、jquery事件

<style>
.div{
width:100px
height:100px
border:1px solid #ccc
}
.div1{}
.div2{}
</style>
<body>
<div class="div2"></div>
<div class="div2"></div>
</body>
<script src="xxx.js"></script>
<script>
    //jquery点击事件
$(".div1").click(function(){
    $(".div2").hide;
})
//jquery移入事件
$(".div1").mouseover(function(){
    $(".div2").css("background-color","red");
})
//jquery移出事件
$(".div1").mouseout(function(){
    $(".div2").css("background-color","blue");
})

</script>

九、jquery选择器

1.基本选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ozY87444-1635487426757)(D:\基本选择器.PNG)]

<body>
    <h3 class="lei">我是h3</h3>
	<h1 id="Idw">我是h1</h1>
	<h3 class="lei">找我干嘛</h3>
	<h4>我是h4</h4>
	<div>我是div</div>
</body>
<script src="xxx.js"></script>
<script>
    //标签选择器
    $("h3").css("background-color","blue");
	//类选择器
	$(".lei").css("color","red");
	//id选择器
	$("#Idw").css("color","orange");
	//并集选择器
	$("#Idw,.lei,div").css("color","aqur");
	//全局选择器
	$("*").css("background-color","green");
</script>

2.层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nK2W68Bf-1635487426763)(D:\层次选择器.PNG)]

<body>
<ul>
	<li>1111111111111</li>
	<li>2222222222222</li>
	<li>3333333333333</li>
</ul>
<div>
<p>wishing 评标前</p>
</div>
<p>hhhhhhhhhhh</p>
</body>
<script src="xxx.js"></script>
<script>
//后代选择器
$(".div p").css("color","red");
//子代选择器
$(".div1 div>p").css("color","blue");
//相邻选择器
$(".div+p").css("color","green");
//同辈元素选择器
$(".div~p").css("color","orange");
</script>

3.属性选择器

属性选择器通过HTML元素的属性来选择元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mFHWMfiC-1635487426767)(D:\属性选择器.PNG)]

<body>
 <img src="xxx.jpg" alt="xxx">   
    </body>
<script src="xxx.js" ></script>
<script>
    //"[属性名称]"
    $("[src]").css("width","100px");
	//指定特定属性值
	$("[src=xxx]").css("width","300px");
	//不指定特定属性值
	$("[src!=xxx]").css("width","300px");
    </script>

4.基本过滤选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zugPGK4m-1635487426770)(D:\基本过滤选择器2.PNG)]

<body>
<ul>
	<li class="three">1111111111111</li>
	<li>2222222222222</li>
	<li class="three">3333333333333</li>
</ul>
</body>
<script src="xxx.js" ></script>
<script>
//获取第一个li
$("li:first).css("color","red");
//获取最后一个li
$("li:last").css("color","red");
//选取去除所有与给定选择器匹配的元素
$("li:not(.three)").css("color","red");
//获取奇偶数行
$("li:odd").css("color","green");  //奇数
$("li:even").css("color","orange");  //偶数
//:eq(index)  等于
$("li:eq(4)").css("color","yellow");
//：gt(index)   大于
$("li:gt(4)").css("color","yellow");
//:lt(index)  小于
$("li:lt(4)").css("color","yellow");
//:header  选取所有标题元素
//:focus 选取当前获取焦点的元素
//:animated  选择所有动画
</script>

十、事件

1.点击事件

<body>
<div>我是div</div>
<button>点击改变内容</button>
</body>
<script src=xxx.js></script>
<script>
$(document).ready(function(){
//点击事件
$("button").click(function(){
$("div").html("我的内容改版了")
})
});
</script>

2.鼠标移入、移出事件

<style>
div{
width:200px;
height:200px;
background-color:green;
}
</style>
<body>
<div class="father"></div>
<div class="father2"></div>
</body>
<script src=xxx.js></script>
<script>
$(document).ready(function(){
     //鼠标移入事件
    $(".father").mouseover(function (){
        $(".father").css("background","blue");
    })
})
  $(".father").mouseenter(function (){
        $(".father").css("background","red");
    })
})
 //鼠标移出事件
    $(".father").mouseout(function (){
        $(".father").css("background","red");
    })
})
  $(".father").mouseleave(function (){
        $(".father").css("background","red");
    })
})
</script>

3.键盘事件

<body>
<input type="text">
</body>
<script>xxx.js</script>
<script>
$(document).ready(function () {
	$("input").keydown(function(){
	console.log(1111+"键盘按下");
})
	$("input").keyup(funvtion(e){
    con
	console.log(2222+"键盘抬起");
})
	$("input").keupress(function(){
	console.log(3333+"键盘输入");
	})
})
</script>

4.改变窗体大小事件

<body>
<input type="text">
</body>
<script>xxx.js</script>
<script>
$(window).resize(function(){
	console.log(11111111);
})
</script>

5.绑定和解绑事件

<script>
$().ready(function(){
	//bind绑定事件
	$("button").bind("click",function(){
		$("div").html("neirong");
	})
	//unbind解除绑定事件
	$("button").unbing();
})
</script>

6.复合事件

<body>
<p>我是一段内容。。。。</p>
<div style="width:100px;height:100px;background:red"></div>
</body>
<script src="xxx.js"></script>
<script>
$(document).ready(function(){
	$("div").hover(function(){
     	$("p").html("我移入了"); 
    }.function(){
       $("p").html("我移出了")；
    })
})
</script>

十一、节点

1.创建节点

<script src="xxx.js"></script>
<script>
//js创建节点
var div1=document.createElement("div");
console.log(div1);
//jquery创建节点
var div2=$("<div></div>")
console.log(div2)[0];
</script>

2.插入节点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jKLO99r5-1635487426773)(D:\同级元素添加.PNG)]

<body>
<ul>
<li >111111111</li>
</ul>
</body>·
<script src=xxx.js></script>
<script>
    $(document).ready(function(){
    var $li=$("<li></li>");
    $li.html("22222222                                                                                            2222");
    //1.在父元素里添加节点
    //在后边追加子元素
    $("ul").append($li);
    $li.appendTo($("ul"))
    //在前面追加子元素
    $("ul").prepend($li);
    $li.prependTo("$("ul")");
    
    //2.同级元素调用添加节点
    //在同级元素后边添加新元素
    $li.html("666666666666");
   
    $("li").after($li);
    $li.insertAfter($("li"));
    //在同级元素前面添加元素
    $("li").before($li);
    $li.insertBefore($("li"));
})
    </script>

3.删除节点

<body>
<div>
<p>我是一段话</p>
<ul>
<lmmmm,i>11111111111111</li>
</ul>
</div>
</body>
<script src="xxx.js"></script>
<script>
//删除节点
//1.remove() 把当前标签删除
$("p").remove();

//empty()   删除标签里的内容
$("p").empty();
</script>

4.复制节点

<body>
<ul>
<li onclick="alert(123)">123456789</li>
<li class="li2">666666</li>
</ul>
</body>
<script>
var $line=$("li").clone(true/false);
console.log($linew[0]);
//替换节点
$("li2").replaceWith($linew);
$linew.replaceAll($(".li2"));
</script>

5.操作属性

<body>
<img src="gyy.jpg" alt="gyy"> 
</body>
<script src="xxx.js"></script>
<script>
//获取属性
var altnae=$("img").attr("alt");
//console.log(altlne)
//设置属性值
$("img").attr("alt","zy");
$("img").attr({"src":"2.jpg","alt":"xxx"});
//删除属性
$("img").removeAattr("alt");
</script>

6.遍历

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bBIlr8kX-1635487426776)(D:\遍历.PNG)]

```

5.操作属性

<body>
<img src="gyy.jpg" alt="gyy"> 
</body>
<script src="xxx.js"></script>
<script>
//获取属性
var altnae=$("img").attr("alt");
//console.log(altlne)
//设置属性值
$("img").attr("alt","zy");
$("img").attr({"src":"2.jpg","alt":"xxx"});
//删除属性
$("img").removeAattr("alt");
</script>