博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery基础
阅读量:4487 次
发布时间:2019-06-08

本文共 1890 字,大约阅读时间需要 6 分钟。

今天开始接触Jquery,以前对Jquery的印象是一个JS方法集,封装成类,然后在页面中引用,就可以直接调用其中的方法。

一般将Jquery文件引入放在页面的最上端(如果页面存在外部JS文件引用),引用格式如下

 <script src='file:///D|/wamp/www/jquery-1.11.2.min.js'></script> 

引入后就可以在JS代码区里直接调用了

JS和Jquery使用中的区别

1.选择器

  JS选择方法 (选择出来的是DOM元素对象)

1 var a = document.getElementById("aa");   //ID选择2 var a = document.getElementsByClassName("aa");//类选择3 var a = document.getElementsByTagName("div"); //标签选择4 var a = document.getElementsByName("aa");//一般是表单元素的name选择

Jquery选择方法,jQuery选择出来的是Jquery object对象,后面加索引[0]就是DOM对象

Jquery选择规则是 $("选择元素")

1 var a = $("#aa"); //Jquery对象2 var a = $(".aa"); //根据class名找3 alert(a.eq(0)); //取第几个jquery对象,4 var a = $("div"); //根据标签名找5 var a = $("[bs=1]"); //根据属性找

2.获取内容的方法区别

  JS获取和定义内容的方法是(如果不赋值就代表直接获取)

  非表单元素

   1 a.innerText = "ceshi";//获取和赋值文本

  2 a.innerHTML = "<span style='color:red'>hello</span>";获取和赋值全部内容,包括标签 

  表单元素

  a.value = "请输入用户名";

  Jquery获取和定义HTML的方法

  如果写参数,代表定义和赋值,如果不写参数,代表直接获取内容

1 /非标单元素2     //a.text("hello");3     //alert(a.text());4     //a.html("aaa");5     //alert(a.html());6     //表单元素7     //a.val("aa");8     //alert(a.val());

3.设置属性设置的方法区别

  JS操作属性的方法

1 //alert(a.getAttribute("bs")); //获取属性2 //a.setAttribute("test","test"); //添加属性 ,两个参数,属性名和属性值3 //a.removeAttribute("bs"); //移除属性

      Jquery操作属性的方法

1 //a.attr("test","test"); //添加属性2 //alert(a.attr("bs")); //获取属性3 //a.removeAttr("bs"); //移除属性

4.操作样式的区别

  JS操作样式       JS只能获取到内联式样式的内容(就是写在标签内的),无法操作内嵌式和外部的CSS样式

   1 //alert(a.style.color); //获取样式

  2 //a.style.color = "green"; //设置样式 

  Jquery操作样式

   1 a.css("color"); //获取样式 2

  2.a.css("background-color","red"); //设置样式 

Jquery事件

  

1 $("#cc").blur(function(){ //匿名函数 不写函数名,不能再别的地方调用 2         alert("失去焦点了"); 3     }) 4  5 //事件一般有两个参数:事件源  事件数据 6 //Jquery事件源不写,事件数据可写可不写 7 //批量加事件 8 $(".test").click(function(e){ 9         alert($(this).val());10         alert(e.clientX);11     })

 

  

 

转载于:https://www.cnblogs.com/du892294464/p/6831443.html

你可能感兴趣的文章
CI Weekly #21 | iOS 持续集成快速入门指南
查看>>
xml 校验
查看>>
Jquery获取输入框属性file,ajax传输后端,下载图片
查看>>
深入浅出Visual_C动态链接库(Dll)编程(宋宝华)----整理(word)
查看>>
docker运行环境安装-后续步骤(二)
查看>>
Python学习——02-Python基础——【3集合与函数】
查看>>
NPOI导出excel表格应用
查看>>
tensorflow从入门到放弃-0
查看>>
解锁scott用户
查看>>
多态的理解
查看>>
AspNet Core 发布到Linux系统和发布IIS 注意项
查看>>
Windows添加.NET Framework 3.0 NetFx3 失败 - 状态为:0x800f0950
查看>>
隐藏显示终端的光标(shell echo,linux c printf)
查看>>
SQL Server 存储过程
查看>>
JSP 标准标签库(JSTL)(JSP Standard Tag Library)
查看>>
导入项目遇到的问题: Some projects cannot be imported because they already exist in the workspace....
查看>>
华为:字符集合
查看>>
用Okhttp框架登录之后的Cookie设置到webView中(转)
查看>>
Java_Activiti5_菜鸟也来学Activiti5工作流_之入门简单例子(一)
查看>>
设计模式(一)工厂模式Factory(创建型)
查看>>