<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery练习</title>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.js"></script>
</head>
<body>
<!-- https://jquery.cuishifeng.cn/index.html jquery访问文档 -->
<!-- https://v3.bootcss.com/ bootstrap访问文档 -->
<!-- https://www.bootcdn.cn/ cdn访问 -->
<div class="box">
<div id="box2">
<ul>
<li><span>222</span></li>
<li><span>我爱你啊</span> </li>
<li><span>我虎爱你啊</span> </li>
<li><span>我不爱你啊</span> </li>
</ul>
</div>
<p>
<span>333</span>
</p>
</div>
<div>
姓名 <input type="text" name="apple">
密码 <input type="text" name="flower" checked="checked">
验证码 <input type="text">
</div>
<div>
<ul>
<li class="li">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p>222</p>
</div>
<div>
<img src="" alt="你好">
<img src="" alt="哈喽">
</div>
<div id="form">
<span></span>
</div>
</body>
<script>
// jQuery 选择器
$('.box') // 获取指定class的元素
var box = $('.box')
console.log(box[0])
$('#box2') // 获取指定id的元素
console.log($('#box2'))
$('span') // 获取指定的标签元素
console.log($('span')[0])
$('div,span,box2.li') // 获取多个指定的元素
console.log($('div,span,li'))
$('li:first') // 获取第一个元素
console.log($('li:first'))
$("li:first-child") // 匹配所给选择器( :之前的选择器)的第一个子元素 类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
console.log($("li:first-child"))
$('li:last') // 获取最后一个元素
var list = $('li:last')
console.log($('li:last'))
console.log(list[0])
$("ul li:last-child") // 匹配最后一个子元 :last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
console.log($('ul li:last-child'))
$("input:not(checked)") // 除指定值外
console.log($("input:not(checked)"))
$('li:odd') // 获取索引值为奇数的元素，从0开始
console.log($("li:odd"))
$("li:even") // 获取索引值为偶数的元素，从0开始
console.log($("li:even"))
$("li:eq(1)") // 匹配一个给定索引值的元素
console.log($("li:eq(1)"))
$("li:gt(1)") // 匹配所有大于给定索引值的元素
console.log($("li:gt(1)"))
$("li:lt(2)") // 匹配所有小于给定索引值的元素
console.log($("li:lt(2)"))
$("div:has(p)") // 匹配含有选择器所匹配的元素的元素
console.log($("div:has(p)"))
$("select option:selected") // 获取所有被选中的选项元素
// jquery核心
// $(function(){ 当DOM加载完成后要执行的函数
// // 文档就绪
// });
$(function () {
setInterval(function () {
console.log(1000)
}, 1000)
})
// $(this)用法
// each() 用法以每一个匹配的元素作为上下文来执行一个函数。
// $("img").each(function(i){
// this.src = "text"+i+"jpg";
// });
// length 匹配当前元素的个数
console.log($("img").length)
// get(index)/get() 取得第 index 个位置上的元素或者取得所有匹配的 DOM 元素集合
$("img").get(0)
console.log($("img").get(0))
$("img").index(); // 搜索匹配的元素，并返回相应元素的索引值，从0开始计数
console.log($("li").index(document.getElementsByClassName('li')))
$('li').index(document.getElementById('bar')); //1，传递一个DOM对象，返回这个对象在原先集合中的索引位置
$('li').index($('#bar')); //1，传递一个jQuery对象
$('li').index($('li:gt(0)')); //1，传递一组jQuery对象，返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li'); //1，传递一个选择器，返回#bar在所有li中的索引位置
$('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
// 扩充jquery对象和方法
jQuery.fn.extend() // 扩展 jQuery 元素来提供新的方法(通常用来制作插件)
jQuery.extend() // 扩展jQuery对象本身。用来在jQuery命名空间上增加新函数
//a、 $("#from")[index] // 该方法获取form元素的dom对象
// b、$(“#form”).get(index)
// jQuery对象与JS原生对象之间转换
// jQuery 转原生js
$("ul").get(0)
console.log($('ul').get(0))
// 原生js转jquery
$()
var a = document.getElementById('form');
console.log($(a))
// 属性
// 设置或返回被选元素的属性值
// .attr 设置或返回被选元素的属性值
$("img").attr("src")
console.log($("img").attr("alt"))
$("img").attr("alt","1.jpg") // 为所有图像设置src属性
console.log($("img").attr("alt","hal"))
$("img").attr({alt:"我爱你",src:""}) // 为所有图像设置alt和src属性，多个值
console.log($("img").attr({alt:"我爱你",src:""}))
$("img").removeAttr("alt") // 删除指定属性
console.log($("img").removeAttr("alt"))
$("p").addClass("text"); // 添加class名 为每个匹配的元素添加指定的类名
console.log($("p").addClass("text"))
$("p").removeClass("text") // 删除指定的class值 从所有匹配的元素中删除全部或者指定的类。
console.log($("p").removeClass("text"))
$("P").removeClass() // 删除所有class值 从所有蒲培的元素中删除全部或指定的类
$("p").toggleClass("selected"); // 如果存在(不存在)就删除(添加)一个类
$("P").html(); // 返回指定的元素内容
console.log($("P").html())
$("p").html("hello <b>word</b>") // 设置或替换html文档或普通文本
$("p").text() // 返回指定文本内容
console.log($("p").text())
$("p").text("hello <b>word</b>") // 设置文本内容
$("input").val(); // 获取指定的input值
console.log($("input").val())
$("input").val("hello"); // 设置指定的input值
// CSS
$("p").css("color") // 取得第一个段落的color样式属性的值。
$("p").css("color","red") // 设置css属性
$("p").css({"color":"#ffffff","background":"red"}) // 设置css属性和值(多个)
// $("p:last").offset().top/left 获取匹配元素在当前视口的相对偏移
console.log($("p.last").offset(top))
$("p.last").offset({top:10,left:50}) // 设置匹配元素在当前视口的相对偏移量
// $("p.first").position().top // 获取匹配元素相对滚动条顶部的偏移
// $("p:first").position({top:20,left:30}) 设置position在当前视口的偏移量
$("div.demo").scrollTop(); // 获取匹配元素相对滚动条顶部的偏移
$("div.demo").scrollTop(300) // 设置匹配元素相对滚动条顶部的偏移
console.log($("li").scrollTop(300))
$("div.demo").scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
$("div.demo").scrollLeft(300) // 设置匹配元素相对滚动条左侧的偏移
$("p").height(); // 获取匹配元素当前计算的高度值(px)
$("p").height(20); // 设置匹配元素当前计算的高度值(px)
$("p").width() ;// 得第一个匹配元素当前计算的宽度值（px）。
$("p").width(300) ;// 设置匹配元素当前计算的宽度值（px）。
// 文档处理
$("p").append("<b>Hello</b>"); // 向每个匹配的元素内部追加内容
$("p").appendTo("div") ; // 前面的追到后元素的内部
$("p").prepend("<b>lock</b>") // 向每个匹配的元素内部前追加内容
$("b").prependTo("p") // 前追到后元素的内部的前内容
$("p").after("<i>love</i>") // 在每个匹配的元素之后插入内容
$("p").before("<span>我爱他</span>") ; // 在每个匹配的元素之前插入内容
$("P").insertAfter('.li') ; // 将已存在的p元素插入到指定元素之后
$("P").insertBefore(".li") ;// 将已存在的p元素插入到指定元素之前
$("p").wrap("<div class='wrap'></div>") ; // 给所有匹配的元素包裹一个指定的元素
$("p").unwrap() ; // 删除匹配的元素的父级元素
$(".box").wrapAll("<div class='flag'></div>") // 将所有匹配的元素用单个元素包裹起来
$(".box").wrapInner('<div class="w"></div>') // 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
$(".box").replaceWith() //将所有匹配的元素替换成指定的HTML或DOM元素。
// $("p").empty(); 删除匹配的元素集合中所有的子节点。
// $("p").remove(); 从DOM中删除所有匹配的元素。
// $("b").clone() 克隆指定标签
</script>
</html>jQuery 用法大全（初学者）
猜你喜欢
转载自blog.csdn.net/weixin_44360943/article/details/108086550
今日推荐
周排行