jq选择器

jquery入门

由 a 夏天 提交于 2019-12-17 04:02:24
jquery入门 1.什么是jquery？ 优秀的JavaScript库，封装了JavaScript的常用功能，直接调动 语法简洁：$ ( '选择器' ) . 方法 ( ) * /特点*/ jQuery强调的理念是写得少，做得多（write less , do more），jQuery独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他库望尘莫及的。概括起来，jQuery有以下优势。 ● 轻量级。 ● 强大的选择器。 ● 出色的 DOM 操作的封装。 ● 可靠的事件处理机制。 ● 完善的ajax。 ● 不污染顶级变量。 ● 出色的浏览器兼容性。 ● 链式操作方式。 ● 隐式迭代。 ● 行为层和结构层分离。 ● 丰富的插件支持。 ● 完善的文档。 ● 开源。 2.jquery的引入 1. jquery实际上就是一个 . js文件，获取jQuery库文件有两种方式： 1. 去官方网站下载：http //jquery.com/ 中文网 https : / /www.jquery123.com/ 2. 去 CDN 下载：https : / / www . bootcdn . cn / jquery < ! -- 1. 引入网上 CDN ( 内容分发网 ) -- > < ! -- < script src = 'http://libs.baidu.com/jquery/1.11

jquery

由 牧云@^-^@ 提交于 2019-12-16 23:21:13
什么是jquery? 优秀的JavaScript库，封装了JavaScript的常用功能 语法简洁： $(‘选择器’).方法() 就是**.js**文件 jquery官网学习网址：jquery.com jquery中文网 https://www.jquery123.com/ 版本：最新版3.4.1 2.0以上的版本，不兼容ie，在开发的时候，一定要用2.0以下的版本 引入方式： (1) 引入网上 CDN(内容分发网) < script src = 'http://libs.baidu.com/jquery/1.11.1/jquery.min.js' > < / script > (2) 引入本地(下载到本地 ctrl+s ) 3.$的作用： $就是jquery对象的别名 window.jQuery = window.$ = jQuery; query加载：$(选择器).ready() $ ( document ) . ready ( function ( ) { $ ( '#box' ) . css ( "height" , 300 ) ; } ) ; $ ( ) . ready ( function ( ) { $ ( '#box' ) . css ( "width" , 300 ) ; } ) ; //最常用 $ ( function ( ) { $ ( '#box' ) .

jQuery基础总结(后续整理)

由 社会主义新天地 提交于 2019-12-09 18:55:59
jQuery jQuery：是一个javascript库 核心理念是write less,do more(写得更少,做得更多) 内部帮我们把几乎所有功能都做了封装，相比基于DOM、BOM的操作会更加简单，兼容性更好 jQuery引入 本身是一个js文件 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"> </script> 本地文件引入 <script src="jquery.js"></script> 另起一个script标签来写script代码 或写在js文件里, 再 <script src="test3(3).js"></script>导入 JQuery和dom对象的转换 $ == Jquery dom对象 _> jq对象 $(dom对象) jq对象 _> dom对象 jq对象[0] 选择器 $('#d1') id选择器 var d1 = $('#d1'); -- jquery对象 -- jQuery.fn.init [div#d1] a.css({"background-color":"blue","height":"300px"}) var d = document.getElementById('d1'); -- 原生dom对象 jquery对象和dom对象之间不能调用互相的方法 a[0] --

肖哥讲jquery：

由 岁酱吖の 提交于 2019-12-09 16:56:45
jquery 是一个模块 一个库 js封装的一个库 导入jq <script src="jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> $ == Jquery dom对象 _> jq对象 $(dom对象) jq对象 _> dom对象 jq对象[0] 选择器 基本选择器 通用选择器 $('*') 标签选择器 $('div') id选择器 $('#id') 类选择器 $('.class') ​ 组合选择器 $('div.class1') 并集 $('div,p') 交集 层级选择器 后代选择器 $('div span') 子代选择器 $('#li>span') 毗邻选择器 $('#li+span') 弟弟选择器 $('#li~span') <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul href="" id="ul"> <li> 1 <ul> <li>11</li> </ul> </li> <li id="l2">2</li> <li> 3<a class="c1" href="www.baidu

JQuery

由 て烟熏妆下的殇ゞ 提交于 2019-12-09 16:38:26
jQuery——一个快速，简介的javaScrip框架 作用：将我们的页面的js代码和HTML页面代码进行分离 　　　提供工作效率 引入jQuery的库 <script type="text/javascript" src="js/jquery-1.11.0.js" ></script> jQuery函数创建：文档加载完成的事件 jQuery(document).ready(function(){ }); $(document).read(function(){ }); $(function(){ }); 三种方式都可以 window.onload = function(){ 　　//文档加载事件 } jq绑定事件例子 $("选择器").click(function(){ }); 事件： .html("文本内容")——替换两个尖括号里面的内容 js和jq对象互换： var div = $("选择器")，日常开发通常在di对象名前面加个$，标识为jq转成js的对象 var $div = $("id选择器"); var jsDiv = $div.get(0); var jsDiv = $div[0]; $(jq对象).事件()——直接将js对象放到$里面 jq开发步骤： 　　1、导入jq的相关文件 　　2、文档加载完成事件： 　　　　$(function(){});页面初始化的操作

python-前端Jquery

由 删除回忆录丶 提交于 2019-12-06 10:23:24
Jquery 高级版javascript 提供了更加便利的js使用方式 楔子 需求二： 将上面的li标签实现隔行换色效果 js代码 <script> var obj = document.getElementsByClassName('city'); for (var j = 0;j < obj.length;j++){ if (j%2==0){ obj[j].style.backgroundColor = 'lightblue' }else{ obj[j].style.backgroundColor = 'lightgreen' } } </script> jquery代码 $('li:odd').css('background-color','lightblue') $('li:even').css('background-color','lightyellow') jquery介绍 js的痛点： window.onload事件只能出现一次 如果出现多次，后面的事件会覆盖前面的事件 浏览器兼容性问题 简单的功能实现的很繁琐，例如：渐变的动画效果 代码容错性差，如果此处报错，会影响后续代码执行 jquery的特点 链式编程： 比如 .show() 和 .html() 可以连写成 .show().html() 。 隐式迭代： 隐式 对应的是 显式。隐式迭代的意思是

面试常见技术问题

由 若如初见. 提交于 2019-12-06 04:15:21
--------- JQ --------- 1.jq 常见选择器？ ，号选择器，分组选择器。空格，祖父选择器。>大于号，父子选择器。+号选择器，紧接下一个兄弟选择器。~号，元素之后所有的 siblings 元素。 ：first，：last，：not，：first-child，:last-child,:animated.：checked 2.jQuery 插件实现方式，分别介绍？ jQuery.fn.extend 封装直接在$下面的方法，就是根下面， 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。 $.extend 用来在 jQuery 命名空间上增加新函数。用一个或多个其他对象来扩展一个对象，返回被扩展的对象 批量的方法用 fn，静态的用$.extend（），不建议用扩展到根下面。 3.bind 和 live 的区别? live 方法其实是 bind 方法的变种，其基本功能就同 bind 方法的功能是一样的，都是为一个元素绑定某个事件，但是 bind 方法只能给当前存在的元素绑定事件，对于事后采用 JS 等方式新生成的元素无效，而 live 方法则正好弥补了 bind 方法的这个缺陷，它可以对后 生成的元素也可以绑定相应的事件。 4.js 和 jq 如何转换？ jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是

前端jquery

由 五迷三道 提交于 2019-12-05 17:31:55
jQuery 引入 # 下载链接: https://jquery.com/ # 第一种方法:本地引入 <script src="jquery.js"></script> <script> </script> # 第二种方法:网址引入 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> jq与js ​ jquery方法找到的标签对象称为jquery对象 ​ 原生js找到的标签对象称之为DOM对象, DOM对象只能调用DOM对象的方法, jquery对象只能用jquery方法, 不能互通 var $obj = jquery对象; var obj = DOM对象; $obj[0] # 通过[索引]的方法从jquery中获取的取对象,全部是DOM对象 dom对象转换为jquery对象 : $(dom对象) -- jquery对象 JQ的基础语法 查找标签 基本选择器(同css) # id 选择器 $("#id") # 标签选择器 $("tagName") # class选择器 $(".className") # 配合使用 $("div.c1") # 所有元素选择器 $("*") # 组合选择器 $("#id, .className, tagName") 层级选择器(同css) ​ x 和 y

Web开发（五）jQuery

由 牧云@^-^@ 提交于 2019-12-05 16:41:29
jQuery是什么 <1> jQuery是由John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 <2> jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! <3> 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 <4> jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 <5> jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 对象 jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() //意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码： document.getElementById(" test ")

day46 jQuery

由 放肆的年华 提交于 2019-12-05 15:26:22
day46 jQuery 内容回顾: 1.库和框架的区别 库: 小而精: 直接操作DOM, 如css()方法 jquery封装了js中的哪些操作(大量的api=方法) - 事件 - 属性 - DOM - 选择器 - ajax(交互的技术) jQuery的链式编程: jQuery的方法可以实现和js的属性操作一样的功能, 好处在哪, jQuery的方法执行完,给返回了jQuery对象, 还可以接着使用其他方法, 这就是链式编程 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>bajie</li> <li>wukong</li> <li>datang</li> </ul> <script src="jquery.js"></script> <script> var colors = ['red','yellow','blue']; //1.从jquery对象转换为js对象 console.log($('li')[0]); //注意这里, 方式一.加上[下标], 是从jquery对象到js对象的转换 //方式二.JQ对象.get(0) //2.从js对象转换为jquery对象 var item = document
订阅 jq选择器