一、基本选择器 选择器 描 述 返回 示例 #id 根据给定id匹配一个元素 单个元素 $("#test") 选取id为test的元素 .class 根据给定类名匹配一个元素 集合元素 $(".test...三、过滤选择器 1、基本过滤选择器 选择器 描 述 返回 示例 :first 选取第1个元素 单个元素 $("div:first") :last 选取最后一个元素 单个元素 $("div:last")...集合元素 $(":header") :animated 选取当前正在执行动画的所有元素 集合元素 $("div:animated") 2、内容过滤选择器 选择器 描述 返回 示例 :contains(...4、属性过滤选择器 选择器 描述 返回 示例 [attribute] 选取拥有此属性的元素 集合元素 $("div[id]") [attribute = value] 选取属性值为value的元素 集合元素...集合元素 $("div[id][title=test]") 选取拥有属性id , 并且属性title 等于test的div元素 5、子元素过滤选择器 选择器 描述 返回 示例 :nth-child(index
>jQuery就是js的工具库 - 一系列功能的集合体 jq内部语法采用的就是原生js jq环境如何搭建 - 在需要使用jq的html中引入jquery.js...即可 jq就是优化了原生js鱼页面进行交互的逻辑 <!...选择器 // jq选择器:$('css选择器语法') let $div = $('#d'); console.log...($div); let $boxs = $('.box'); console.log($boxs); // jq对象如何转换为js对象 - jq对象可以理解为装有js对象的数组
function viewportToPixels(value) { var parts = value.match(/([0-9.]+)(vh|vw)/...
08.19自我总结 js|jq获取兄弟节点,父节点,子节点 一.js var parent = test.parentNode; // 父节点 var chils = test.childNodes;...test.previousElementSibling; // 上一个兄弟节点元素 var next = test.nextElementSibling; // 下一个兄弟节点元素 注意操作父来控制子必须给子元素赋予一个变量 二.jq
d3.js的empty selection.empty - 检测判断选择集是否为空。若为空,则返回true,反之返回false。注意此方法无删除作用!!!...jq的emptye empty() - 从被选元素中删除子元素,即达到清空被选元素的效果。 remove() - 删除被选元素(及其子元素)。
我们使用jquery选择器时如果有多个结果,我们可以使用eq函数选择指定下标的元素 例如此处 vampire <div class
js对象和jq对象互相转换:(js对象和jq对象不是一个东西,不能互相调用彼此的方法,有些时候只能的js对象但是需要用到jq框架里面的方法这时候就需要使用以下方式将js对象转成jq,同理有时只能得到jq...对象但是需要调用js对象里面的方法,所以需要使用以下方法把jq对象转成js对象) //js获取对象的方式 var js = document.getElementById(“d1”); //jq获取对象的方式...var jq = $("#d1"); js转jq: var jq = $(js); jq转js: var js = jq[0]; ###选择器 基础选择器 用法和css中一样 id选择器 $(...("i1"); //js对象转成jq对象 var jq = $(js); //jq.val() 获取文本框的值 alert(jq.val()); }); $(..."#b2").click(function( ){ //得到js对象 var jq = $("#i1"); //jq对象转成js对象,jq对象实际上就是一个数组 var
概述 * 是 javaScript 的框架 2. js与jq的互转 * js ---> jq $(js) * jq ---> js jq[索引]、jq.get(索引) # jq 可以看成是...js 的数组对象 3. jq选择器 ① 基本选择器 * $("#id") id选择器 * $(".class") 类选择器 * $("body...") 元素选择器 ② 层级选择器 * $("A B ") 后代选择器 * $("A > B") 子选择器 ③...属性选择器 * $("A[属性名]") 属性名称选择器 * ("A[属性名='值']") 属性选择器 * $("A[属性名='值'][]...复合属性选择器 ④ 过滤选择器 * :first 获得选择的元素中的第一个元素 * :last 获得选择的元素中的最后一个元素
写更少的代码,做更多的事情: write Less ,Do more 将我们页面的JS代码和HTML页面代码进行分离 提高我们的工作效率,轻松的进行前端开发 JQuery中的选择器: 基本选择器 ID选择器...和JS之间的转换 JQ对象,只能调用JQ的属性和方法 JS对象,只能调用JS的属性和方法 基础示例: JS=>JQ对象 JQ=>JS对象 【JQ和JS之间的转换】 - JQ对象,只能调用JQ的属性和方法 - JS对象,只能调用JS的属性和方法 ...; } //清空城市select中的option /*var $city = $("#city"); //将JQ对象转成JS对象进行清空
不得不说,jq是写代码是替代js的一种超级棒的选择。对于刚入门的小白都知道,一般学前端,都要用js写tab切换,大图滚动之类的效果,同样的效果,js大概20-40行不等。jq只需要10行左右。...先说选择器,要知道js里,也有,就是你给标签起了id,class名,在js里需要获取是一个意思。...在jq中很方便,不用写很长的xxx=document.getElementById(‘xxx’) 1.基本选择器 ? 2.层次选择器 ? 3.过滤选择器 ? 4.内容过滤器 ?...5.可见选择器 ? 6.属性选择器 ? 7.子元素选择器 ?...表单中选择确切的某个属性的元素,不需要全部都写input 熟练使用选择器是熟练使用jq的前提 图片全部来自个人word文档中的截图,如有错误欢迎指出,互相学习。
class="value">"UTF-8"> title>jq...> src="http://libs.baidu.com/jquery/2.0.0/jquery.js
本文作者:IMWeb 一大碗油茶 原文出处:IMWeb社区 未经同意,禁止转载 不得不说,jq是写代码是替代js的一种超级棒的选择。...对于刚入门的小白都知道,一般学前端,都要用js写tab切换,大图滚动之类的效果,同样的效果,js大概20-40行不等。jq只需要10行左右。你还在犹豫吗?赶紧学起来!...先说选择器,要知道js里,也有,就是你给标签起了id,class名,在js里需要获取是一个意思。...在jq中很方便,不用写很长的xxx=document.getElementById(‘xxx’) 1.基本选择器 ? 2.层次选择器 ? 3.过滤选择器 ? 4.内容过滤器 ?...表单中选择确切的某个属性的元素,不需要全部都写input 熟练使用选择器是熟练使用jq的前提 图片全部来自个人word文档中的截图,如有错误欢迎指出,互相学习。
/js/jquery-1.11.0.min.js">" - 语法 - $("选择器") 或 jQuery("选择器") "var 元素对象...jQuery和html整合: 1.下载 2.通过script标签的src属性引入即可(1.11) jQuery语法: $("选择器"); 或 jQuery("选择器"); jq对象和...js对象转换 jq ===> js(dom) jq对象[index] jq对象.get(index); js ===> jq对象 $(js对象); 事件: click...: 基本选择器: * #id .class 标签名称 多个选择器之间使用逗号 层次选择器: a b a>b a+b a~b 基本过滤选择器...--1.导入jq的js文件--> <!
一、语法简介 $("选择器") 或 jQuery("选择器") var 元素对象 = $("选择器"); eg: var 元素对象 = $("#id值"); 元素对象.val(); // 获取当前对象上...(js对象); jQuery(js对象); jquery对象 → js对象 (jQuery对象本质上是js对象数组.)...jq元素对象.hover(function(){// 第一个函数相当于 mouseover }, function(){ // 第二个函数相当于mouseout }); 三、jQuery的选择器 基本选择器...: *所有 | # id | .class | 标签选择器(标签名)|a,b(多个选择器用‘,’隔开)| 层级选择器: a b :选择a的b后代 | a > b:选择a的b孩子 | a+b:选择a...的大弟弟b | a~b:选择a的所有b弟弟| 属性选择器: [属性名] 获取元素上带有该属性名的元素对象 [属性名='值'] 获取元素上带有该属性名且值为''的元素对象 属性选择器一般和标签选择器联合使用
"> //jquery:简单、粗暴 //jq和js的关系 //js是什么?...js是一门编程语言 //jq仅仅是基于js的一个库,jq可理解为就是开发js的一个工具。 //概念 //1. 为什么要学jquery ?...js库,说白了就是js文件,里面有一大堆的方法 //3. 使用jquery的步骤: 1. 引入jquery文件 2. 入口函数 功能实现 //4....花钱 jq-->dom [0] get(0) //$的实质:function // console.log($ === jQuery); // $(function...() { // // }); //选择器 //基本选择器 标签 类 id选择器 交集 并集 //层级选择器: 子代 后代 //过滤选择器: //:
目录 首先在官网下载jquary的js文件 html页面文件里面引入 jQuery中的选择器 基本选择器id 选择器标签选择器 (“a”)类选择器 (“.class”) 首先在官网下载jquary的js...先看基本选择器 id 选择器 function demo1(){ //使用JS方式获得--HTMLInputElement var uname=document.getElementById...* jq--获得的是Object对象,就是一个数组 * * jq对象如何转换成一个js对象?...* * jq[0]--使用下标 * js对象如何可以转成jq?...js var val= document.getElementsByTagName("input"); // jq [...]
前言 我们在一些陈旧或者传统mvc的项目中还是会经常使用jq,但是由于对jq api或者核心思想不熟悉,导致我们的某些写法并不是特别好,这里会摘录一些一些并给出大家更好的写法建议。...选择元素 选择器使用 尽量使用综合查询效率最高的,一般id以及元素选择是最高效的,其实是class,最差的是属性选择器以及伪类选择器。...所以最终建议如果dom较多的话,最优先使用id选择器固定最小范围。...原理也很简单,在任何一个jq方法结束其操作之后都会重新返回其jq对象。我们找到源码部分:jq的show(),hide()方法,可以看到其最后会把原生对象重新返回。...demo1=$(".demo1") 多次操作dom合并 //不建议 $(".demo1").append('') $(".demo1").append('') //js
首先说一下,这篇文章对初学者有很大的帮助,特别是在学习原生JS的初学者,能够帮助你们能够更好的建立好良好的思路和对原生JS的更深一步的了解。废话我们就不多说了。 首先看一下我们要实现什么功能吧。...运动到400 宽度变为400 Css div { position: absolute; width: 100px; height: 100px; background-color: pink; } 核心js
目录 类库和框架的区别 写法 jq操作样式 属性 事件 class dom操作 效果 类库和框架的区别 jq jq是一个功能丰富,轻量级的类库 zepto.js zepto.js 是更轻量级的类库...,比jq的打开速度快的多,同样兼容jq的代码 apicloud apicloud是一个框架 类库 提供了很多api,相当于一个仓库,里面有各种各样的工具,你需要用到什么就去找这些工具。...框架 相当于买了一个新房子,现在是一个空壳,需要去装修 写法 $(selector).action(); selector: 选择器名称 action: jq对象的一个方法 jq操作样式
领取专属 10元无门槛券
手把手带您无忧上云