摘要:它通过易于使用的在大量浏览器中运行,使得文档遍历和操作,事件处理,动画和更加简单。如果想打印输出对象的内容。他们的宽高都显示设置为一个祖先元素是隐藏的。元素被认为是可见的,因为他们仍然占据布局空间。
官网传送门: http://jquery.com/
中文API文档: http://jquery.cuishifeng.cn/
jQuery是一个快速,小巧,功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。
1.引入文件div1$("#div1").css("background","red"); //表示给前面这个对象加css样式
2.对象div2div3$(".aa").css("background","green");
div1原生js方法获取对象:var oDiv1 = document.getElementById("div1");//原生对象 jquery获取对象: var $div1 = $("#div1");//jq对象 将两种方式得到的对象打印出来看一下区别 console.log(oDiv1); console.log($div1);
这里jq对象是有长度的,相当于数组。
如果想打印输出对象的内容。 console.log(oDiv1.innerHTML);//obj.innerHTML是原生对象的方法 console.log($div1.get(0).innerHTML);
原生对象的方法和jq的方法是不一样的,不能混用,但是两者可以相互转化。 //原生对象转化成jq对象 $(obj) //obj.css()是jq对象的方法 原生对象使用jq对象的。css()方法 $(oDiv1).css("background","red"); //jq对象转化成原生对象 $obj.get(0) //jq对象就想使用原生对象的.innerHTML方法 console.log($div1.get(0).innerHTML);文档就绪函数
在写jquery代码的时候建议将代码写在文档就绪函数里面 //当dom已经加载 并且页面已经完全呈现时 会ready事件 //因为ready()最后执行 所以将其他函数事件放在ready()中 $(document).ready(function(){ var a = 5; }); //是上面的简写形式 $(function(){ }); $和jquery是一个意思,源码中有解释。
![图片上传中...]
几种选择器1 空格表示后代
2 >表示亲子代
3 +表示紧挨着的兄弟
4 ~表示所有兄弟
5 :eq()
//选中第3个元素 003 正值从前往后找 $("#ul1 li:eq(2)").css("background","red"); 第3项是红色
//选中第6行,什么效果也没有,但是也不会报错 $("#ul1 li:eq(5)").css("background","red");
//倒数第一个 负值从后往前找 $("#ul1 li:eq(-1)").css("background","red");
以下同理 $("#ul1 li:even").css("background","red"); //偶数 $("#ul1 li:odd").css("background","green");//奇数 $("#ul1 li:first").css("background","red"); $("#ul1 li:last").css("background","green"); $("#ul1 li:gt(1)").css("background","red"); //大于1的会被选中 $("#ul1 li:lt(1)").css("background","green");
$("#ul1 li:contains(3)").css("background","red");//包含3:target()举个例子
导航栏中有3项 点击其中某一项,显示对应的内容。
若想让导航栏浮在上方,要给ul加高度 #nav{ margin-bottom:800px; height:30px; }
jquery来实现 1000ms后,蓝色变成黄色 也可以用css来实现这样的效果 #menu3:target{ /* target是css的标签 用css执行会更快 */ background: #ffff00;; }
点击菜单3 蓝色变成黄色
:input举个例子 输入什么 列表中对应的颜色改变
打印输出值,keyup取当前值,keydown取前一个值 console.log(this);
这里的this指的是function之前的对象,当然会输出那句话。
现在功能上没有问题,但是性能上有问题,#list li取了2次,多找了一次,我们可以把#list li先存起来赋给一个变量.
$(function(){ var $Lis = $("#list li"); $("#search").on("keyup",function(){//keyup当前值 绑定事件用on //console.log(this.value);//原生方法 效率高 // console.log($(this).val());//jq方法" $Lis.css("background","transparent"); if(this.value != ""){ //this.value 要字符串拼接 $("#list li:contains(this.value)") 不行得把this.value字符串拼接 $("#list li:contains("+ this.value +")").css("background","red"); } }); }); console.log($Lis);
jquery对象 类似数组 :empty 选择内容为空的节点 :parent 选择有内容的节点 :has() 匹配含有选择器所匹配的元素的元素:hidden
元素被认为是隐藏的几种情况: 1.他们的display:是none. 2.他们是type="hidden"的表单元素。 3.他们的宽高都显示设置为0. 4.一个祖先元素是隐藏的。 元素visibility:hidden opacity:0被认为是可见的,因为他们仍然占据布局空间。 input[type="text"][name="userid"]{ background: red; } 会选中第一个输入框 用jquery写 $("input[type="text"][name="userid"]");nth-child
nth-child(1) 从1开始 nth-child(2n) 从1开始 nth-child(2n+1) 从0开始A元素
B元素C元素
D元素
$("p:nth-of-type(2)");//C元素 从后往前看 第2次出现p标签的元素
$("p:nth-child(2)");//什么也没选中 从后往前看 第二个孩子不是p 是div 不选
加上颜色看效果更明显A元素
B元素C元素
D元素
p:nth-of-type(2) 想找第2次出现p标签的孩子 选中第三行 C元素 第三行背景变成绿色
p:nth-child(2) 想要找第2个孩子 并且要是p标签下的 但是现在第二个孩子是div标签 所以并没有选中,没有内容变成红色
A元素
B元素C元素
D元素
div:nth-child(2)要找第2个孩子 并且要是div标签下的孩子 选中 背景变成红色
var n = $("input:checked").length; 取选中的输入框
inputtype="text":focus{
background: red; }
inputtype="text"{
background: yellow; }
黄色输入框,获取焦点之后变成红色
自动会让你选择文件
:selected 选中下拉菜单
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54634.html
摘要:它通过易于使用的在大量浏览器中运行,使得文档遍历和操作,事件处理,动画和更加简单。如果想打印输出对象的内容。他们的宽高都显示设置为一个祖先元素是隐藏的。元素被认为是可见的,因为他们仍然占据布局空间。 官网传送门: http://jquery.com/中文API文档: http://jquery.cuishifeng.cn/jQuery是一个快速,小巧,功能丰富的JavaScript库。...
摘要:它通过易于使用的在大量浏览器中运行,使得文档遍历和操作,事件处理,动画和更加简单。如果想打印输出对象的内容。他们的宽高都显示设置为一个祖先元素是隐藏的。元素被认为是可见的,因为他们仍然占据布局空间。 官网传送门: http://jquery.com/中文API文档: http://jquery.cuishifeng.cn/jQuery是一个快速,小巧,功能丰富的JavaScript库。...
摘要:所以当我们思考能否用来实现时还应考虑到的结构,能不能构造出满足已存在的选择器的布局。用来实现的好处就是可以尽量大的把组件功能和业务逻辑分离开来,真正做一个组件该做的事,希望越来越好 我们今天用css来实现一个常见的tab切换效果 查看原文可以有更好的排版效果哦 先看效果 https://codepen.io/xboxyan/pe... 前言 哪些简单的效果可以考虑用css来实现呢,目前...
摘要:今天介绍一下,选择器和选择器的优先级。选择父元素为元素的所有元素。注释不支持选择器。二选择器的优先级在中并没有给各个选择器名字,在权威指南一书中,给出了选择器的名字,如通配选择器,选择器,选择器,等等。 今天介绍一下,css选择器和选择器的优先级。 一、选择器 更加专业性的介绍,来看一下w3school中的描述,网址为:http://www.w3school.com.cn/cs...下...
阅读 2077·2021-11-24 09:39
阅读 1409·2019-08-30 15:44
阅读 1904·2019-08-29 17:06
阅读 3308·2019-08-29 16:32
阅读 3513·2019-08-29 16:26
阅读 2612·2019-08-29 15:35
阅读 2988·2019-08-29 12:50
阅读 1596·2019-08-29 11:15