码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 入门

时间:2019-09-20 23:06:46      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:w3c   bsp   类型   选择器   问题   dde   解决   安全   red   

jQuery是什么?

jQuery是一个JavaScript常用的工具函数库。

jQuery是一个轻量级的"写的少,做的多"的JavaScript库。

writer less , do more -----  用更少的代码,解决更多的需求

jQuery的版本问题

目前jQuery有三个大版本,1.xx.xx、 2.xx.xx 和 3.xx.xx

1版本兼容性最高,可以有效的兼容ie浏览器

2版本删除了兼容最低只能兼容到ie9,使代码更加轻量化

3版本重构了底层代码,彻底放弃了ie9以下的浏览器,但是却新增加
了很多的使用的方法,并且代码的安全性也增加很多

jQuery的使用

我们可以根据需要下载一个指定版本的jquery文件,当然也可以选择使用第三方文件。

js 官方网址: http://jquery.com/

例如:<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery

jQuery 中的核心语法

在jQuery当中,jQuery是一个核心方法,用来查找元素从而方便对元素的操作,可以简写为 $

jQuery("#btn").click(function() {
        alert(123);
    });

// 上边的代码也可以改为
$("#btn").click(function(){
    alert(123)
})

基础语法

$(selector).action();
  • 美元符号定义jQuery
  • 选择符(selector) "查询"和"查找"HTML元素
  • jQuery的action()执行对元素的操作

 文档就绪函数

在js当中,存在一个 window.onload = function(){},函数当中的代码会在整个文档加载完成之后执行

在jquery中,也有类似的方法

$(document).ready(function(){
    // jq 代码
});

// 上述代码也可以简写为:
$(function(){
    // jq 代码
})

//这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,造成错误。
$(function())与window.onload的区别
  •  window.onload必须等到页面所有的元素都加载完成之后才能使用,而$(function())只需DOM加载完成就会执行
  • window.onload一个页面只能有一个,而$(function())可以有多个,从上到下执行

jQuery 对象

 原生的DOM元素与jq的DOM元素的方法,不互通
 原生代码可以和jq代码同时存在,只是互相之间对象的属性或方法不互通
 

 jq对象与原生对象之间的转换

1.jq对象转原生对象

  解析数组

$("#box")[0].style.background = "blue";

  get()方法

$("#box").get(0).style.background = "blue";

2.原生转jq对象

   将对象包裹在jq函数中 

var obox1 = document.getElementById("box1");
$(obox1).css("background","yellow")

jQuery 选择器

在jq当中,我们可以通过选择器任意的选取html元素,并且操作html元素。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

三个基础选择器如下:

$("p") 元素选择器
$("#d1") id选择器
$(".class") class选择器

高级选择器

$(".msg h2").css("background","red")                 //后代选择器
$(".msg").find("h2").css("background","red")

$(".msg>h2").css("background","red")
$(".msg").children("h2").css("background","red")     //子元素选择器

$(".msg+span").css("background","red")               //相邻兄弟选择器
$(".msg").next("span").css("background","red")

$(".msg~span").css("background","red")               //普通兄弟选择器
$(".msg").nextAll("span").css("background","red")

$("input[type=text][name]").css("background","red")  //属性选择器

伪类选择器

$(".list li:first").css("background","red")      //选择第一个子元素
$(".list li").first().css("background","red")

$(".list li:last").css("background","red")      //选择最后一个子元素
$(".list li").last().css("background","red")

$(".list li:eq(3)").css("background","red")   //选择子元素中的第3+1个(从0开始)
$(".list li").eq(3).css("background","red")

$(".list li:odd").css("background","red")   //选择奇数


$(".list li:even").css("background","red")  //选择偶数

$(".list li:not(.red)").css("background","red")   //选择没有当前类名的
$(".list li").not(".red").css("background","red")

$(".list li:contains(j)").css("background","red")   //选择内容含有j的标签

$(".list li:empty").css("background","red")  //选择空标签

//注意:$(".list li").empty()方法,是清空标签的内容,该方法不是选择器 $(".list:has(.red)").css("background","red") //选择类名为red的标签 $(".list").has(".red").css("background","red") $("h1:hidden").css("display","block") //选择隐藏的元素 $("h1:visible").css("display","none") //选择显示的元素

常用选择器还可以访问:

 

jQuery 入门

标签:w3c   bsp   类型   选择器   问题   dde   解决   安全   red   

原文地址:https://www.cnblogs.com/yad123/p/11559920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!